To upgrade the original

There are two reasons for upgrading:

  1. Improved packaging speed
  2. Keep up with The Times

This document does not describe the upgrade on the official website (refer to the official website upgrade). It only describes the problems encountered during the upgrade and provides solutions

The problem record

1. devServerConfiguration related

1.1 Stats attribute no longer supported, deleted

1.2 The after attribute is no longer supported. Modify it as follows:

   - after: () = > {
   -  opn(`http://${dev.local}:${dev.port}/dist/web#/`);
   - },
   + open: [`http://${dev.local}:${dev.port}/dist/web#/`].Copy the code

1.3 The disableHostCheck attribute is no longer supported. Modify it as follows:

    - disableHostCheck: true
    + allowedHosts: [
    +  'dev.jd.com',
    +  `${pre.apiTargetHost}`,
    +  `${pre.crowdHost}`,
    +  `${dev.apiTargetHost}`,
    +  `${dev.crowdHost}`, +],Copy the code

2. NamedModulesPlugin is not a constructor

Modify the configuration:

plugin: [
    ...
    - new webpack.NamedModulesPlugin(),
    ...
]
optimization: {... + moduleIds:'named'. }Copy the code

3. url-loaderImage path cannot be found in CSS

output: {
    ...
    + assetModuleFilename: `${_project}/images/[hash:8][name].[ext]`,},module: {
    rules: [{...test: /\.(jpe? g|png|gif|ico)$/,
        use: [
          {
            loader: 'url-loader'.options: {
              limit: 10000,
              - name: _project + '/images/[hash:8][name].[ext]'.esModule: false
            }
          },
        ],
        + type: 'javascript/auto',},... ] }Copy the code

4. Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prototype') at Object... /.. /node_modules/safer-buffer/safer.js

The specific cause is not clear. The problem is resolved after the buffer component is installed.

yarn add buffer -S

5. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

In the process of running, there are many such error messages, because the polyfill automatic introduction of the NodeJS core module has been removed in Webpack5, so it needs to be imported manually. If the nodeJS core module is used in the packaging process, WebPack will prompt you to configure it accordingly.

resolve: {
    ...
    + fallback: {
    +  path: false,
    +  buffer: false,
    +  zlib: false,
    +  asserts: false,
    +  stream: false,
    +  util: false,
    +  url: require.resolve('url'), +}},Copy the code