webpack提取公共模块

抽取公共模块

第三方库或框架之类的，基本上不会变动，可以提取出来，用于缓存处理。
使用到插件：
CommonsChunkPlugin (webpack 4之前用)
SplitChunksPlugin (webpack 4后使用)

此处使用webpack4, 因此引用插件 SplitChunksPlugin
该插件内置在webpack4中，只需要配置即可

  1. webpack.config.js 配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    const config = {
    entry: './src/main.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
      //+++
      optimization: {
        splitChunks: {
          
          //默认值+++
          chunks: "async",  //异步模块
          minSize: 30000, //超过30000才打包
          minChunks: 1, //最小引入次数1
          maxAsyncRequests: 5, //一次异步加载的最大模块请求数
          maxInitialRequests: 3, //入口文件最大的模块请求数
          automaticNameDelimiter: '~', //默认的文件名分隔符
          name: true, //根据chunk名或cahceGroups里的key生成文件名
          //默认值+++
          cacheGroups: { //一个对象，对象里的每一个key-value都对应一个公共块。如第一个：
            commons: {  //将引用到的node_modules目录下的模块打包为一个文件
              test: /[\\/]node_modules[\\/]/, //将引用到到node_modules目录下的模块打包为一个文件
              name: "vendors", //输出的文件名
              chunks: "all" //可配置为initial:默认打包的chunk, async：异步加载的chunk,all：所有的chunk
            },
            error:{ // 举栗子：错误页面
              test: /error.vue/, //将error.vue单独打包
              name:'error', //输出文件名为error
              chunks:'all', //所有chunk
              minSize:10 //配置最小的文件大小，小于这个值不会被打包。默认继承上级的minSize:30000
            }
          }
        }
      }
      //+++
    }

  2. 文件命名
    从上面的配置，打包后，会生成

    • bundle.js: 逻辑代码
    • 0.bundle.js: 提取的公共的代码

    • 1.bundle.js: error文件代码

      可以更改输出文件名的生成方式：

      1
      2
      3
      4
      5
      6
      7
      output: {
         //===
         filename: '[name].[chunkhash].js',  //文件名+chunk hash作为生成的文件名
         //===
         path: path.resolve(__dirname, 'dist')
       }

      会生成main、vendors、error开头的js文件
      chunkhash是根据每个chunk内容生成的hash，内容变化的时候才会改变，用于缓存的处理

本文地址： http://gehaiqing.com/blog/2018/07/06/20180706-webpack-5-common/