使用webpack生成多个HTML文件可以通过以下步骤实现:
以下是一个示例的webpack配置文件:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: './src/page1.js',
page2: './src/page2.js',
page3: './src/page3.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/page1.html',
filename: 'page1.html',
chunks: ['page1'],
}),
new HtmlWebpackPlugin({
template: './src/page2.html',
filename: 'page2.html',
chunks: ['page2'],
}),
new HtmlWebpackPlugin({
template: './src/page3.html',
filename: 'page3.html',
chunks: ['page3'],
}),
],
};
在上述示例中,我们配置了3个入口文件(page1.js、page2.js、page3.js)和对应的HTML模板文件(page1.html、page2.html、page3.html)。每个HTML文件都会自动引入对应的打包后的脚本文件。
通过以上配置,运行webpack命令即可生成多个HTML文件。生成的HTML文件将会被输出到指定的输出目录(在示例中为dist目录)中。
注意:以上示例中的配置是基于webpack 4.x版本,如果使用的是其他版本的webpack,可能需要进行相应的调整。
领取专属 10元无门槛券
手把手带您无忧上云