webpack编译多个.html文件

实现打包多个.html页面，分别引入不同js、css文件，并实现多页面热更新

1. package.json文件：

{
  "name": "webpack_demo6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.3",
    "expose-loader": "^4.1.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.5",
    "sass": "^1.59.3",
    "sass-loader": "^13.2.1",
    "style-loader": "^3.3.2",
    "webpack": "^5.76.2",   
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.1"
  },
  "dependencies": {
    "jquery": "^3.6.4"
  }
}

"build": "webpack" //设置的快捷打包方式

"webpack": "^5.76.2", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.13.1" //注意下这几个的安装版本

"style-loader": "^3.3.2", "css-loader": "^6.7.3", "less": "^4.1.3", "less-loader": "^11.1.0", "sass": "^1.59.3", "sass-loader": "^13.2.1" //这几个loader是处理css文件的

"mini-css-extract-plugin": "^2.7.5", //该插件是将CSS提取到单独的文件中

"html-webpack-plugin": "^5.5.0", //该插件生成一个 HTML5 文件

"html-loader": "^4.2.0", //这个loader将 HTML 导出为字符串

"expose-loader": "^4.1.0", //允许暴露一个模块（整体或者部分）给全局对象（self、window 和 global）

2.webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        'about': path.resolve(__dirname, './src/about/about.js'),
        'product': path.resolve(__dirname, './src/product/product.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),  //打包后的文件存放的地方
        filename: 'js/[name].bundle.js',  //打包后输出文件的文件名
        chunkFilename: '[name].bundle.js',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader'],
            },
            {
                test:/\.(png|jpg|jpeg|svg|gif)$/i,
                /*type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024
                    }
                },
                generator: {
                    filename: 'images/[name][hash:8][ext]'
                }*/
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name][ext]'
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name][ext]'
                }
            },
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"],
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject:'body',
            template:path.resolve(__dirname,'src/about/about.html'),  //指定模板文件
            filename: 'about.html',
            chunks: ['about'],
        }),
        new HtmlWebpackPlugin({
            inject:'body',
            template:path.resolve(__dirname,'src/product/product.html'),  //指定模板文件
            filename: 'product.html',
            chunks: ['product'],
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',  //输出文件的文件名
        }),
    ],
    mode:'development',
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 1000,
        open: true,
        hot: true,
    },
};

2.1、入口配置多个

entry: {
        'about': path.resolve(__dirname, './src/about/about.js'),
        'product': path.resolve(__dirname, './src/product/product.js'),
    },

2.2、输出配置

output: {
    path: path.resolve(__dirname, 'dist'),  //打包后的文件存放的地方
    filename: 'js/[name].bundle.js',  //打包后输出文件的文件名
    chunkFilename: '[name].bundle.js',
    clean: true,
},

2.3、 html 插件配置

plugins: [
        new HtmlWebpackPlugin({
            inject:'body',
            template:path.resolve(__dirname,'src/about/about.html'),  //指定模板文件
            filename: 'about.html',
            chunks: ['about'],
        }),
        new HtmlWebpackPlugin({
            inject:'body',
            template:path.resolve(__dirname,'src/product/product.html'),  //指定模板文件
            filename: 'product.html',
            chunks: ['product'],
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',  //输出文件的文件名
        }),
    ],

2.4、devServer热更新配置

devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 1000,
        open: true,
        hot: true,
    },

访问页面时，对应的页面加文件名，例如：

http://localhost:1000/about.html

http://localhost:1000/product.html

3.文件目录