由于vue-cli 3.0 对项目结构进行了大规模的调整，webpack的配置方式也进行了大规模的调整，并不能像之前一样直接修改
webpack.config.js文件来修改配置了，得使用符合vue-cli 3.0规范的方式进行配置修改了
vue-cli 3.0 的配置通过vue.config.js 来进行配置
目前项目中用到的一些配置
module.exports = {
productionSourceMap: false,
configureWebpack: {
},
chainWebpack: config => {
config
.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transformAssetUrls = {
audio: 'src',
}
return options;
});
},
publicPath: process.env.NODE_ENV === 'production'
? '/public/Acti/roomboom/'
: '/',
pages: {
mobile: {
// page 的入口
entry: 'src/mobile/main.js',
// 模板来源
template: 'public/mobile.html',
// 在 dist/index.html 的输出
filename: 'mobile.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'mobile Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'mobile']
},
pc: {
// page 的入口
entry: 'src/pc/main.js',
// 模板来源
template: 'public/pc.html',
// 在 dist/index.html 的输出
filename: 'pc.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'pc Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'pc']
},
pcbootstrap: {
// page 的入口
entry: 'src/pcbootstrap/main.js',
// 模板来源
template: 'public/pcbootstrap.html',
// 在 dist/index.html 的输出
filename: 'pcbootstrap.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'pc Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'pcbootstrap']
}
}
}
vue-cli 3.0提供了vue inspect 命令来导出最终webpack的配置
vue inspect --mode production 导出的是生产模式的配置
配合 configureWebpack 或者 chainWebpack 可以对webpack配置进行调整
不过chainWebpack的文档没找到一个写的比较清楚的configureWebpack 的使用方式就比较简单明了了
使用configureWebpack 的学习成本应该比较低一点