Вопрос или проблема
Я новичок, изучаю некоторые аспекты фронтенда. Я пытаюсь включить HTML-части в свои основные HTML-файлы, используя html-loader в своей конфигурации Webpack. Несмотря на то, что я следовал различным учебным материалам и решениям, я продолжаю сталкиваться с проблемами. Я тоже это пробовал, но не могу разобраться. Если вы поможете мне избавиться от этого, я буду благодарен.
Я пробовал это, все еще не нахожу решения.
Есть ли способ включить частичное использование html-webpack-plugin?
Вот мой файл webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const webpack = require("webpack");
const glob = require("glob");
module.exports = ({ mode }) => {
const isProduction = mode === "production";
return {
entry: "./src/js/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/app.bundle.js",
clean: true,
},
devServer: {
static: {
directory: path.join(__dirname, "dist"),
},
compress: true,
port: 3000,
open: true,
hot: true,
},
module: {
rules: [
{
test: /\.(s[ac]ss|css)$/i,
use: [
isProduction ? MiniCssExtractPlugin.loader : "style-loader",
"css-loader",
"postcss-loader",
"sass-loader",
],
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.(png|jpe?g|gif|svg|ico|eot|ttf|woff)$/i,
type: "asset",
generator: {
filename: "images/[name][ext]",
},
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
resolve: {
extensions: [".js"],
},
plugins: [
...glob.sync("./src/pages/**/*.html").map((file) => {
return new HtmlWebpackPlugin({
template: file,
filename: path.basename(file),
chunks: ["main"],
});
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
}),
...(isProduction
? [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
["mozjpeg", { quality: 75 }],
["pngquant", { quality: [0.65, 0.9], speed: 4 }],
["svgo", { removeViewBox: false }],
["gifsicle", { interlaced: true }],
],
},
},
}),
]
: []),
],
mode: isProduction ? "production" : "development",
};
};
Я пишу это в своем index.html и других HTML-страницах, но когда я запускаю npm run dev или npm run build, я получаю это <%= require(‘html-loader!./partial/header.html’).default %>.
<%= require('html-loader!./partial/header.html').default %>
Пожалуйста, помогите мне решить это. Если вам нужна дополнительная информация, дайте мне знать, пожалуйста.
Заранее спасибо.
Ответ или решение
Конечно! Давайте подробно рассмотрим вашу проблему с подключением HTML-партиалов в главные HTML-файлы с использованием html-loader в конфигурации Webpack. Попробуем идентифицировать возможные источники ошибок и предложить решение.
Проблема
Вы пытаетесь подключить HTML-партиалы в вашем основном HTML-файле, используя html-loader, но вместо ожидаемого результата при сборке получаете строки вроде:
<%= require('html-loader!./partial/header.html').default %>Это указывает на то, что Webpack не обрабатывает этот код должным образом.
Возможные решения
-
Проверьте правильность установки и версий пакетов: Убедитесь, что
html-loaderиhtml-webpack-pluginустановлены и добавлены в вашем проекте. Сделайте это, запустив:npm install html-loader html-webpack-plugin --save-devТакже проверьте версии, чтобы понять, совместимы ли они.
-
Настройка
html-loader: Убедитесь, чтоhtml-loaderправильно настроен в вашемwebpack.config.js. Вы уже добавили его в правила, но для вставки партиалов вам может потребоваться использовать специальный синтаксис. Вместо:<%= require('html-loader!./partial/header.html').default %>Попробуйте следующий подход, используя
html-loaderнапрямую в каждом бланке, который вы хотите включить:<div> <!-- Чтобы подключить файл header.html --> <div class="header"><%- require('./partial/header.html') %></div> </div>Обратите внимание, что здесь используется
<%-вместо<%=. Это важно, так как оно гарантирует, что вывод HTML будет правильно обработан. -
HTMLWebpackPlugin: Проверьте вашу конфигурацию
HtmlWebpackPlugin. В вашем коде присутствует следующее:chunks: ["main"],Убедитесь, что вы действительно используете этот чанк (
main). Возможно, вам следует добавить другие чанки, если они у вас есть, или просто убрать это свойство, чтобы использовать все чанки по умолчанию. -
Обновите конфигурацию Webpack: Может быть, что-то в вашей конфигурации Webpack устарело. Убедитесь, что у вас актуальная версия Webpack и используемых плагинов. Убедитесь в наличии обновлений и после обновления попробуйте снова.
Пример конфигурации
Вот предложенная структура, которую вы можете использовать в webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const glob = require("glob");
// Установка точки входа
module.exports = ({ mode }) => {
const isProduction = mode === "production";
return {
entry: "./src/js/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/app.bundle.js",
clean: true,
},
module: {
rules: [
{
test: /\.html$/i,
use: [
{
loader: "html-loader",
options: {
minimize: isProduction,
},
},
],
},
// другие правила...
],
},
plugins: [
...glob.sync("./src/pages/**/*.html").map((file) => {
return new HtmlWebpackPlugin({
template: file,
filename: path.basename(file),
});
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
}),
// другие плагины...
],
// другие настройки...
};
};Заключение
Если вы выполните предложенные шаги и обновите свой код, это должно помочь решить проблему с подключением HTML-партиалов. Если ошибка все равно будет проявляться, пожалуйста, проверьте консоль на предмет дополнительных сообщений об ошибках или некорректно настроенных файлов. Не стесняйтесь задавать дополнительные вопросы, если что-то остается неясным. Удачи в обучении и разработке!