I’m a beginner, learning some frontend staff. I’m trying to include HTML partials into my main HTML files using html-loader in my Webpack configuration. Despite following various tutorials and solutions, I keep encountering issues. I tried this also but can’t figure out. If you help me to get rid of this I’ll be thankful.
I tried this, still not getting any solution.
Is there a way to include partial using html-webpack-plugin?
Here is my webpack.config.js file
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",
};
};
I write this in my index.html and other html pages, but when I run npm run dev or npm run build I got this <%= require(‘html-loader!./partial/header.html’).default %>.
<%= require('html-loader!./partial/header.html').default %>
Please help me to solve this. If you need more info let me know please.
Thanks in advance.
