通过 vue.config.js 修改 webpack 的默认配置 （Vue项目上线优化 三）

1、通过 vue.config.js 修改 webpack 的默认配置 

通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程 序员把工作的重心，放到具体功能和业务逻辑的实现上。 
 
如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从 而对项目的打包发布过程做自定义的配置（具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js）。 

// vue.config.js     
// 这个文件中，应该导出一个包含了自定义配置选项的对象   
module.exports = {     
// 选项...   
} 

2、为开发模式与发布模式指定不同的打包入口 

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

① 开发模式的入口文件为 src/main-dev.js

② 发布模式的入口文件为 src/main-prod.js 

3、configureWebpack 和 chainWebpack 

在 vue.config.js 导出的配置对象中，新增 configureWebpack 或 chainWebpack 节点，来自定义 webpack 的打包配置。
 
 在这里， configureWebpack 和 chainWebpack 的作用相同，唯一的区别就是它们修改 webpack 配置的方 式不同：

① chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置

② configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置 

两者具体的使用差异，可参考如下网址： https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3  

4、通过 chainWebpack 自定义打包入口 

代码示例如下： 

注意： 要将项目./src 目录下入口文件的main.js文件复制两份，分别命名为main-prod.js（发布模式下的入口文件）和main-dev.js（开发模式下的入口文件）

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')
        })
    }
}