webpack直接打包html页面

1. 首先确保已经安装了Node.js和NPM。如果没有安装，需要先去官网下载并按照指引进行安装。
2. 在命令行中创建一个新的项目文件夹，然后进入该文件夹。
3. 初始化项目，运行npm init -y来生成默认的package.json文件。这将为我们提供所需的配置信息。
4. 接下来，我们需要安装webpack作为构建工具。运行npm install webpack --save-dev来安装webpack到开发依赖（--save-dev）中。
5. 同样地，还需要安装其他必要的loader和plugin。根据自己的需求选择合适的loader和plugin，比如babel、css loader等。运行类似于npm install babel-loader css-loader style-loader file-loader url-loader html-webpack-plugin --save-dev的命令来安装相应的loader和plugin。
6. 安装 npm install --save-dev mini-css-extract-plugin
7. 现在，我们需要创建一个Webpack配置文件。在项目根目录下创建一个名为"webpack.config.js"的文件（见附件）
8. 在根目录下创建src文件夹，把所有的html复制过来
9. 最后在命令行中运行 npx webpack进行打包

10. 
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const path = require('path');
    //要打包的页面列表
    const pages = ['index',
    			'app',
    			'footer',
    			'header'
    ];
    let entry = {};
    let plugins = [];
    const init = () => {
    	pages.map(name => {
    		plugins.push(
    		new HtmlWebpackPlugin({
    			minify: false, //是否压缩
    			template: path.join(__dirname,`/src/${name}.html`), //模板文件
    			filename: path.join(__dirname,`/dist/${name}.html`), //输出文件名
    			inject: 'body',//脚本放置页面位置
    			chunks: [name],
    			hash: false
    		})
    		);
    		entry[name] = `./src/${name}.html`
    	});
    	//最后加上打包css
    	plugins.push(
    		new MiniCssExtractPlugin({
    			// 这里的配置和webpackOptions.output中的配置相似
    			// 即可以通过在名字前加路径，来决定打包后的文件存在的路径
    			filename:'css/[name].[hash].css',
    			chunkFilename:'css/[id].[hash].css',
    		})
    	)
    }
    init();
    module.exports = {
        entry:entry, // 设置入口文件路径
        output: {
            //filename: 'bundle.js', // 输出文件名称
    		//filename: '[name]-[contenthash].js',
    		filename: './js/[name].[hash:6].js',
            path: path.resolve(__dirname, 'dist') // 输出文件存放位置
        },
    	module: {
    	        rules: [{
    	            test: /\.html$/,
    	            use: 'html-loader'
    	        },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: ["babel-loader"],
    				generator: { // 生成文件名字 - 定义规则
    				  filename: 'js/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
    				}
                },
    			{
    				test: /\.css$/,
    				use:[MiniCssExtractPlugin.loader,'css-loader']
    			},
    			{
                test: /\.(png|jpg|gif|jpeg)$/i,   // 匹配图片文件
                type: "asset",    // 在导出一个 data URI 和一个单独的文件之间自动选择
                generator: { // 生成文件名字 - 定义规则
                    filename: 'imgs/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
    				}
    			},
    			{
    			  test:/\.(ttf|eot|svg)$/,
    			  generator: { // 生成文件名字 - 定义规则
                    filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
    			  }
    			},
    			],
    	},
    	plugins:plugins,
    	
    };