webpack升级

1. webpack2.x 到 webpack3.x

  1. npm install webpack@3.x --save-dev

参考：如何将webpack2项目升级到webpack3

2. webpack3.x 到 webpack4.x

  • 首先将 webpack-dev-middleware 升到2.x ， 1与webpack@4.x不兼容

    1. npm install --save -dev webpack-dev-middleware@2.x

  • 安装webpack 4.x

    1. npm install webpack@4.x --save-dev

  • 异常

    1. Error: Cannot find module 'webpack/bin/config-yargs'
    2. Require stack:

    解决：
    原因: 这个就是目前版本的webpack-dev-server@2.11.5 不支持 webpack@4.32.2
    解决: 重装一个webpack-dev-server是3.0版本以上就兼容 :

    1.   "webpack": "^4.46.0",
    2.   "webpack-bundle-analyzer": "^2.9.0",
    3.   "webpack-cli": "^3.3.12",
    4.   "webpack-dev-server": "^3.11.3",

  • 异常

    1. node_modules\webpack-dev-server\client\utils\reloadApp.jsF:\Project\CloudFilmVueVersion-Practice\ucloudfilm-self\filmAPP\film-webpack\film-webpack\node_modules\html-webpack-plugin\lib\compiler.js:81
    2.       var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {

    解决：
    html-webpack-plugin和webpack版本不兼容导致的。
    我的webpack版本是4.41.5.当时html-webpack-plugin版本是5.
    把插件版本降到2，出现了上述的问题。
    *更新了一下插件版本到3.2.0就可以了。

  • 异常

    1. Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    2.   at Module.eval (BaseClient.js?e917:12)
    3.   at eval (BaseClient.js:40)
    4.   at Module../node_modules/webpack-dev-server/client/clients/BaseClient.js (app.js:2184)
    5.   at __webpack_require__ (app.js:790)
    6.   at fn (app.js:101)
    7.   at Module.eval (SockJSClient.js?810f:30)
    8.   at eval (SockJSClient.js:160)
    9.   at Module../node_modules/webpack-dev-server/client/clients/SockJSClient.js (app.js:2196)
    10.   at __webpack_require__ (app.js:790)
    11.   at fn (app.js:101)

    查了好多资料好像是export和import共用了导致不兼容引起的

    1. npm install babel-plugin-transform-es2015-modules-commonjs

    然后在 babelrc中配置

    1. { "plugins": ["transform-es2015-modules-commonjs"] }

  • extract-text-webpack-plugin 已废弃 使用 mini-css-extract-plugin代替

  • eslint-loader 废弃 eslint-webpack-plugin代替
  • css-loader 升级到5
  • 添加 stytle-loader 2

  • 去掉utils.js 中css-loader 和 style-loader 的配置

    3. webpack4.x 到 webpack5.x

  • Upgrade webpack 4 to the latest available version.

  • When using webpack >= 4, upgrading to the latest webpack 4 version should not require additional guidance.

(webpack4.x 升级为 5.x)

  • Upgrade webpack-cli to the latest available version (when used)(webpack-cli升级到最新)
  • Upgrade all used Plugins and Loaders to the latest available version（所有插件和loader升级到最新）

    Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5 一些插件和加载程序可能有一个测试版，必须使用它才能与Webpack5兼容