VueCli中自定义配置webpack

VueCli中自定义webpack的配置

以下为自己学习的总结，如果您发现有什么错误的，麻烦您教正，感谢！！！

VueCli 生成的项目中，默认隐藏了webpack的配置项，减少因配置文件所消耗的时间。因此，要修改webpack配置，可以在项目的根目录中创建文件名为vue.config.js 的配置文件。这样就可以自定义配置webpack。
具体配置参考官方文档：

1. 创建vue.config.js文件

2. 配置vue.config.js文件

在vue.config.js 导出的配置对象中，通过添加 configureWebpack 或 chainWebpack 节点来自定义打包配置。

configureWebpack 与 chainWebpack 作用相同，唯一区别是它们修改webpack配置方式不同：

1. chainWebpack 通过 链式编程 的方式，来修改默认的配置。
2. configureWebpack 通过 操作对象 的方式，来修改默认的配置。

---

以 chainWebpack 为例：

1. 将开发模式和生产模式和的入口文件分开；
2. 将通过 配置 externals 节点，来加载外部CDN资源，目的：缩小webpack打包后单文件体积
3. 通过配置 plugin 插件节点，来自定制首页内容，在需要定制的区域通过条件表达式来渲染内容

module.exports = {
    // 自定义配置webpack
    // 将开发模式与生产模式的入口文件分开
    chainWebpack: config => {
        // 调用when函数来判断状态
        // process.env.NODE_ENV 固定的写法，用于获取当前模式
        // entry()获取默认的入口文件，clear清除入口文件，add添加新的入口文件
        // 生产模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
            // 配置externals节点，来加载外部cdn资源，在此声明的第三方依赖包都不会被打包，缩小打包体积
            config.set('externals', {
                vue: 'Vue',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
            // 自定制，使用插件，给args添加参数isProd属性并赋值true
            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })
        })
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')

            // 自定制，使用插件，给args添加参数isProd属性并赋值false
            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        })
    }
}

① 将开发模式和生产模式和的入口文件分开

将项目入口文件 main.js 改为内容相同，文件名分别为 main-dev.js 和 main-prod.js

      chainWebpack: config => {
        // 调用when函数来判断状态
        // process.env.NODE_ENV 固定的写法，用于获取当前模式
        // entry()获取默认的入口文件，clear清除入口文件，add添加新的入口文件
        // 生产模式
        config.when(process.env.NODE_ENV === 'production', config => {
        	// 修改入口文件
            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')
        })
      }

---

---

② 通过 配置 externals 节点，来加载外部CDN资源

       // 生产模式
        config.when(process.env.NODE_ENV === 'production', config => {
        	// 修改入口文件
        	....
            // 配置externals节点，来加载外部cdn资源，在此声明的第三方依赖包都不会被打包，缩小打包体积
            config.set('externals', {
                vue: 'Vue',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
        }

在public中的index.html文件中导入第三方依赖包所需的 js 和 css 文件，例：

  
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.1/theme-chalk/index.css" />
  
  <script src="https://cdn.staticfile.org/element-ui/2.13.1/index.js">script>

---

---

③ 通过配置 plugin 插件节点，来自定制首页内容

	// 生产模式
        config.when(process.env.NODE_ENV === 'production', config => {
        	// 修改入口文件
            ...
            // 配置externals节点，来加载外部cdn资源，在此声明的第三方依赖包都不会被打包，缩小打包体积
           ...
            // 自定制，使用插件，给args添加参数isProd属性并赋值true
            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })
        })
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
        	// 修改入口文件
          ...
            // 自定制，使用插件，给args添加参数isProd属性并赋值false
            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        })

在public中的index.html文件中通过 htmlWebpackPlugin.options 来获取自添加的参数，并判断该参数的值，从而实现自定制， 例：

  
  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统title>

本人小白，暂时学习到这里，请多多指正！