vue如何实现webpack配置
Vue 项目中配置 Webpack 的方法
Vue CLI 默认隐藏了 Webpack 配置，但可以通过以下方式自定义配置：
使用 vue.config.js 文件
在项目根目录创建或修改 vue.config.js 文件，通过 configureWebpack 或 chainWebpack 进行配置：
module.exports = {
configureWebpack: {
// 直接合并到默认配置
plugins: [new MyPlugin()]
},
chainWebpack: config => {
// 链式操作配置
config.module
.rule('vue')
.use('vue-loader')
.tap(options => ({ ...options, compilerOptions: { whitespace: 'preserve' } }))
}
}查看默认配置
运行以下命令查看完整的 Webpack 配置：
vue inspect > webpack.config.js常见配置示例
添加 loader：
module.exports = {
chainWebpack: config => {
config.module
.rule('yaml')
.test(/\.ya?ml$/)
.use('yaml-loader')
.loader('yaml-loader')
}
}配置别名：
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components')
}
}
}
}修改输出目录：
module.exports = {
outputDir: 'dist',
assetsDir: 'static'
}环境区分配置
通过 process.env.NODE_ENV 区分环境：
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 生产环境配置
} else {
// 开发环境配置
}
}
}注意事项
- Vue CLI 内部使用 webpack-chain 进行配置，优先考虑使用
chainWebpack - 修改基础 loader 配置时需谨慎，可能影响 Vue 单文件组件的正常编译
- 生产环境配置会被优化和压缩，与开发环境行为不同
对于更复杂的定制需求，可以 eject 配置（不推荐）：
vue eject
