webpack直接打包html页面

  1. tyle="text-align:justify;">首先确保已经安装了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,
	
};