博客

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: