vue-cli3搭建项目之webpack配置

青旅半醒 2023-08-17 15:22 56阅读 0赞

前面篇介绍了项目初始化，下面就要开始对项目webpack进行配置，由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。

[vue.config.js官方配置指南][vue.config.js]

### 一、在项目根目录下新建vue.config.js文件与package.json同级 ###

下面是我的vue.config.js文件,里面有详细的注释，这里不再赘述。

const path = require('path')
    
    module.exports = {
      publicPath: './', // 基本路径
      outputDir: 'dist', // 输出文件目录
      lintOnSave: false, // eslint-loader 是否在保存的时候检查
      // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
      // webpack配置
      chainWebpack: (config) => {
      },
      configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
          config.mode = 'production'
        } else {
          // 为开发环境修改配置...
          config.mode = 'development'
        }
        Object.assign(config, {
          // 开发生产共同配置
          resolve: {
            alias: {
              '@': path.resolve(__dirname, './src'),
              '@c': path.resolve(__dirname, './src/components'),
              '@p': path.resolve(__dirname, './src/pages')
            } // 别名配置
          }
        })
      },
      productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
      // css相关配置
      css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
          css: {}, // 这里的选项会传递给 css-loader
          postcss: {} // 这里的选项会传递给 postcss-loader
        }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
        modules: false // 启用 CSS modules for all css / pre-processor files.
      },
      parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
      pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
      // webpack-dev-server 相关配置
      devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 允许外部ip访问
        port: 8022, // 端口
        https: false, // 启用https
        overlay: {
          warnings: true,
          errors: true
        }, // 错误、警告在页面弹出
        proxy: {
          '/api': {
            target: 'http://www.baidu.com/api',
            changeOrigin: true, // 允许websockets跨域
            // ws: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        } // 代理转发配置，用于调试环境
      },
      // 第三方插件配置
      pluginOptions: {}
    }

### 二、优化打包chunk-vendors.js文件体积过大 ###

当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。

方案一：利用splitChunks将每个依赖包单独打包，在生产环境下配置，代码如下。

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
          config.mode = 'production'
          // 将每个依赖包打包成单独的js文件
          let optimization = {
            runtimeChunk: 'single',
            splitChunks: {
              chunks: 'all',
              maxInitialRequests: Infinity,
              minSize: 20000, // 依赖包超过20000bit将被单独打包
              cacheGroups: {
                vendor: {
                  test: /[\\/]node_modules[\\/]/,
                  name (module) {
                    // get the name. E.g. node_modules/packageName/not/this/part.js
                    // or node_modules/packageName
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                    // npm package names are URL-safe, but some servers don't like @ symbols
                    return `npm.${packageName.replace('@', '')}`
                  }
                }
              }
            }
          }
          Object.assign(config, {
            optimization
          })
        } else {
          // 为开发环境修改配置...
          config.mode = 'development'
        }
        Object.assign(config, {
          // 开发生产共同配置
          resolve: {
            alias: {
              '@': path.resolve(__dirname, './src'),
              '@c': path.resolve(__dirname, './src/components'),
              '@p': path.resolve(__dirname, './src/pages')
            } // 别名配置
          }
        })
      }

方案二、利用DllPlugin和DllReferencePlugin将依赖包打包成外部文件在index中引入。

1. 在package.json中新建library,用于存储即将要打包的依赖包名和打包后的文件名。

{
        ...
        "name": "demo-cli3",
      	"version": "1.0.0",
        "version_lib": "1.0.0",
        "library": {
           "lib_v1_0": [
               "jquery/dist/jquery.min.js"
            ],
            "vueBucket_v1_2": [
               "vue-router",
               "vuex"
            ]
        },
        ...
    }

2. 创建webpack.dll.config.js文件，代码如下

const path = require('path')
    const webpack = require('webpack')
    const {library} = require('./package.json')
    // const assetsSubDirectory = process.env.NODE_ENV === 'production'
    //   ? build.assetsSubDirectory : dev.assetsSubDirectory
    let { version_lib } = require('./package.json');
    version_lib = version_lib.replace(/\./g,'_');
    module.exports = {
      entry: library,
      output: {
        path: path.resolve(__dirname, './libs/package/js'),
        filename: `[name].${version_lib}.dll.js`,
        library: '[name]_library'
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          }
        ]
      },
      optimization:{
        minimizer:[
          new UglifyPlugin({
            uglifyOptions: {
              warnings: false,
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ['console.log'] // 移除console
              }
            }
          })
        ]
      },
      plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
        new webpack.DllPlugin({
          path: path.resolve(__dirname, './libs/package/json', '[name].manifest.json'),
          name: '[name]_library',
          context: process.cwd()
        })
      ]
    }

3. 在vue.config.js中配置DllReferencePlugin

let { version, version_lib , openGzip,library } = require('./package.json');
    ...
    module.exports = {
      configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
          config.mode = 'production';
          ...
          Object.assign(config, {
            ...
            plugins:[
              ...config.plugins,
              ...Object.keys(library).map(name => {
                return new webpack.DllReferencePlugin({
                  context: process.cwd(),
                  manifest: require(`./libs/package/json/${name}.manifest.json`),
                })
              })
            ]
          });
          ...
        } else {
          // 为开发环境修改配置...
          config.mode = 'development';
        }
        ...
      },
    }
    ...

4. 将打包好的js自动添加进index.html中

下载add-asset-html-webpack-plugin

npm install --save-dev add-asset-html-webpack-plugin

在vue.config.js中配置add-asset-html-webpack-plugin

注：方案一、方案二可同时使用，单独使用方案二不需要将vue也添加进打包序列，那样会重复打包（在chunk-venders.js中始终会将vue打包进去），若同时使用则不会出现该情况。

至此，打包优化结束，运行打包，你会发现原先的vender文件没有了，同时多了好几个依赖的js文件（方案一）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

### 三、打包时去除打印信息（console） ###

1. 下载uglifyjs-webpack-plugin

[uglifyjs-webpack-plugin中文文档][uglifyjs-webpack-plugin]

npm install --save-dev uglifyjs-webpack-plugin

2. 在vue.config.js文件中引入，并在configureWebpack的optimization中添加如下代码：

const UglifyPlugin = require('uglifyjs-webpack-plugin')
    module.exports = {
        ...
     configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
          config.mode = 'production'
          // 将每个依赖包打包成单独的js文件
          let optimization = {
            ...
            minimizer: [new UglifyPlugin({
              uglifyOptions: {
                compress: {
                  warnings: false,
                  drop_console: true, // console
                  drop_debugger: false,
                  pure_funcs: ['console.log'] // 移除console
                }
              }
            })]
          }
          Object.assign(config, {
            optimization
          })
        } else {
          // 为开发环境修改配置...
          config.mode = 'development'
        }
        ...
      },
        ...
    }

3. 运行打包，你会发现我们在页面中写的那些打印日志的代码都消失了。

注：以上代码适用于uglifyjs-webpack-plugin 2.1.1及以前的版本，新版uglifyjs-webpack-plugin需写成以下方式

...
    minimizer: [new UglifyPlugin({
       uglifyOptions: {
           warnings: false,
           compress: {
             drop_console: true, // console
             drop_debugger: false,
             pure_funcs: ['console.log'] // 移除console
           }
       }
    })]
    ...

### 四、配置全局jQuery ###

1. 下载jQuery npm包

npm install --save-dev jquery

2. 设置‘jquery$’别名,代码如下：

...
    chainWebpack: (config) => {
        // 修复HMR
        config.resolve.symlinks(true);
        // 别名配置
        console.log("__dirname",__dirname);
        config.resolve.alias
          .set('@', path.resolve(__dirname, './src'))
          .set('@a', path.resolve(__dirname, './src/assets'))
          .set('@c', path.resolve(__dirname, './src/components'))
          .set('@p', path.resolve(__dirname, './src/pages'))
          .set('jquery$', 'jquery/dist/jquery.min.js');
      },
    ...

3. 使用ProvidePlugin插件为jQuery添加全局变量

...
     configureWebpack: (config) => {
         ...
        Object.assign(config, {
          // 开发生产共同配置
          // externals: {
          //   'vue': 'Vue',
          //   'element-ui': 'ELEMENT',
          //   'vue-router': 'VueRouter',
          //   'vuex': 'Vuex'
          // } // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(用于csdn引入)
          plugins:[
            ...config.plugins,
            new webpack.ProvidePlugin({
              jQuery: "jquery",
              $: "jquery",
              "windows.jQuery":"jquery"
            })
          ]
        });
      },
    ...

至此可以在全局使用jquery了

### 五、开启gizp压缩 ###

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。

1. 下载 compression webpack plugin

npm install -D compression-webpack-plugin

在package.json中添加openGzip字段，用作gizp开启开关

{
      "name": "demo-cli3",
      "version": "1.0.0",
      "openGizp": false,
      ...
    }

3. vue.config.js 中配置如下

注：生成的压缩文件以.gz为后缀，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。

### 六、将版本号添加进打包的js名中 ###

1. vue.config.js 中配置如下

...
    let { version , openGzip } = require('./package.json');
    version = version.replace(/\./g,'_');
    ...
    module.exports = {
      assetsDir: "static",
     configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
          config.mode = 'production';
            ...
          Object.assign(config, {
            output:{
              ...config.output,
              filename: `static/js/[name].[chunkhash].${version}.js`,
              chunkFilename: `static/js/[name].[chunkhash].${version}.js`
            },
            ...
          });
          ...
        } else {
          // 为开发环境修改配置...
          config.mode = 'development';
        } 
        ...
      },
    }
    ...

完整代码如下：

注：如需其他的配置可在上方[官网配置指南][vue.config.js]中查找相关配置

[vue.config.js]: https://cli.vuejs.org/zh/config/#vue-config-js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: /images/20230810/bb2d5273ca634bdb97805effa6d612f6.png
[uglifyjs-webpack-plugin]: https://blog.csdn.net/u013884068/article/details/83511343