项目结构图,项目src 部分分为goods 和 users 两个部分,配置文件公共
1.webpack.base.conf.js 文件中配置多入口
entry: { goods: './src/goods/main.js', users:'./src/users/main.js' }2. HtmlWebpackPlugin 提取作为一个公共的组件
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = [ new HtmlWebpackPlugin({ filename: 'users.html', template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true}, chunksSortMode: 'dependency', chunks: ['manifest','vendor','users']}),new HtmlWebpackPlugin({ filename: 'goods.html', template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest','vendor','goods'] })
]3.加入到webpack.base.conf.js
const myHtmlPlugin = require('./myHtmlPlugin.js')plugins: myHtmlPlugin4.打包之后内容
5.开发模式指定打开页面
二 生产模式指定打开页面