通过 VUE.CONFIG.JS 修改 WEBPACK的默认配置,实现开发模式 和 发布模式的打包文件分开式

488 阅读1分钟

默认情况下,vue-cli 3.0生成的项目,隐藏了webpack配置项,如果我们需要配置webpack 需要通过vue.config.js来配置。

chainWebpack可以通过链式编程的形式,修改webpack配置 configureWebpack可以通过操作对象的形式,修改webpack配置

1.在项目根目录中创建vue.config.js文件,

2.编辑vue.config.js中文件的实现,配置webpack的

module.exports = {
  chainWebpack: config => {
    //发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      //entry找到默认的打包入口,调用clear则是删除默认的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
    })
    //开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}