1、項目目錄結構為：

?

2、webpack.config.js配置文件為：

?

var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {//打包入口 entry: {main: './src/js/main.js',a: './src/js/a.js',b: './src/js/b.js',c: './src/js/c.js'},//打包后的文件 output: {//不加__dirname 會報錯path: __dirname + '/dist',//注意：使用[name]確保每個文件名都不重復filename: 'js/[name]-[chunkhash].js',//線上地址配置publicPath:'http://cdn.com/'},plugins: [new htmlWebpackPlugin({template: 'index.html',filename: 'a.html',title: 'this is a.html',//增加指定的chunkschunks:['main','a']}),new htmlWebpackPlugin({template: 'index.html',filename: 'b.html',title: 'this is b.html',//增加指定的chunkschunks:['main','b']}),new htmlWebpackPlugin({template: 'index.html',filename: 'c.html',title: 'this is c.html',//增加指定的chunkschunks:['main','c']})] }

3、執行命令：

npm run webpack

4.編譯：

?

總結

以上是生活随笔為你收集整理的html-webpack-plugin插件 根据模板生成多页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。