实际是多个项目，多个入口在webpack打包时打包到一起
目录结构
* project
* user
* App.vue
* user.index.html
* user.main.js // router直接在这里配置
* goods
* App.vue
* goods.index.html
* goods.main.js // router直接在这里配置
// 配置webpack.base.config.js
module.exports = {
entry: {
// 修改这里的入口entry
"user.index": resolve('./src/project/user/user.main.js'),
"goods.index": resolve('./src/project/goods/goods.main.js')
},
// 其他内容不修改
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath :
config.dev.assetsPublicPath
},
配置 webpack.dev.conf.js
需要使用到new HtmlWebpackPlugin()这个插件
这个插件是修改生成html的
function GetHtmls () {
let files =[
path.join(__dirname,'..','src/project/user/user.index.html'),
path.join(__dirname,'..','src/project/goods/goods.index.html'),
]
let plugins = [];
let filenames = ['user.index','goods.index']
for (let i=0;i< filenames.length;i++) {
plugins.push(new HtmlWebpackPlugin({
filename: filenames[i] + '.html',
template: files[i],
inject: true, // 是否注入对应的js
chunks: ['manifest', 'vendor' , 'filenames[i]'] //这个配置使得每个入口index.html只引入自己的js
}));
}
return plugins;
}
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// 删除原来的此段配置
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
] //在原来的配置最后追加上自己写的这个配置
.concat(getHtmls())
// 配置 weback.prod.conf.js
和base同样的操作
只是
new HtmlWebpackPlugin({
filename: filenames[i] + '.html',
template: files[i],
inject: true, // 是否注入对应的js
chunks: ['manifest', 'vendor' , 'filenames[i]'] //这个配置使得每个入口index.html只引入自己的js
minify: {
removeComments: true, //移除注释
collapseWhitespace: true, //空格合并
removeAttributeQuotes: true // 移除属性引号
},
chunksSortMode: 'dependency'
}),
