Webpack3.x->Webpack4.x升级记录

2018-09-13

字数统计: 518字 | 阅读时长: 2分

本篇目录：

先升级webpack-cli
遇到的问题
- 问题1：compilation.mainTemplate.applyPluginsWaterfall is not a function
  - 问题描述
  - 暂时解决方案
- 问题2：Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
  - 问题描述
  - 解决方案
- 问题3：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
  - 问题描述
  - 解决方案
  - 附注
小结

先升级webpack-cli

执行命令如下：

npm install webpack-cli -D
或者
npm install -g yarn
yarn add webpakc-cli -D

遇到的问题

问题1：compilation.mainTemplate.applyPluginsWaterfall is not a function

问题描述

问题截图

暂时解决方案

1	yarn add webpack-contrib/html-webpack-plugin -D

问题2：Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

问题描述

问题截图

解决方案

1	去除，require(‘extract-text-webpack-plugin’)的引用

或者

1	npm install extract-text-webpack-plugin@next

问题3：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

问题描述

问题截图

解决方案

4.x中已经删除CommonsChunkPlugin，替换成了splitChunks,这里有相关介绍内容

去除new webpack.optimize.CommonsChunkPlugin，修改为

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendor",
                chunks: "all"
            }
        }
    }
}

附注

optimization参数介绍

optimization: {
    splitChunks: {
      chunks: "initial",         // 必须三选一： "initial" | "all"(默认就是all) | "async"
      minSize: 0,                // 最小尺寸，默认0
      minChunks: 1,              // 最小 chunk ，默认1
      maxAsyncRequests: 1,       // 最大异步请求数， 默认1
      maxInitialRequests: 1,    // 最大初始化请求书，默认1
      name: () => {},              // 名称，此选项课接收 function
      cacheGroups: {                 // 这里开始设置缓存的 chunks
        priority: "0",                // 缓存组优先级 false | object |
        vendor: {                   // key 为entry中定义的 入口名称
          chunks: "initial",        // 必须三选一： "initial" | "all" | "async"(默认就是异步)
          test: /react|lodash/,     // 正则规则验证，如果符合就提取 chunk
          name: "vendor",           // 要缓存的 分隔出来的 chunk 名称
          minSize: 0,
          minChunks: 1,
          enforce: true,
          maxAsyncRequests: 1,       // 最大异步请求数， 默认1
          maxInitialRequests: 1,    // 最大初始化请求书，默认1
          reuseExistingChunk: true   // 可设置是否重用该chunk（查看源码没有发现默认值）
        }
      }
    }
  },

小结

本篇参照资料：

Webpack3.x-Webpack4.x升级记录