The webpack version in the project is still 3, it will be upgraded today

There are two choices. First, upgrade from 3 to 4, and then from 4 to 5. Second, upgrade directly from 3 to 5.

Okay, I’m not that tough, so I’ll take it one step at a time

From 3 to 4

The official guide webpack.docschina.org/migrate/4/#…

The upgrade here is not difficult, mainly in the following aspects:

  1. Update Node to version 6 or later
  2. Update the plug-in for compatibility
  3. Add mode configuration to configuration (see documentation)
  4. Remove unrecommended and removed plug-ins
  5. Remove CommonsChunkPlugin and replace it with optimization.splitchunks
  6. Use module.rules instead of module.loaders

3 to 4 upgrades, I did not encounter any problems, basically passed, but 4 to 5 upgrades very bumpy

From 4 to 5

This is where the rough road begins…

Documents: webpack.docschina.org/migrate/5/#…

  1. Upgrade a node to a level higher than 10.13.0

  2. Compare the configuration items discarded during the upgrade

  3. Test webpack5 compatibility (here we go, here we go, error here we go)

    Add the following options to the WebPack 4 configuration to check that the build is still running correctly.

    module.exports = {
  // ...
  node: {
    Buffer: false,
    process: false,
  },
};
Copy the code

    Error message:

    ReferenceError: Buffer is not defined
Copy the code

    After installing NPM, I still can’t find the error. I don’t know which article I saw the solution. Thank you for the configuration information provided by Lao Tie

    module.exports = {
   // ...
   plugins: {
     ...
     new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer']}),
   },
 };
Copy the code

    Perfect one. Next one

    Error message:

    ReferenceError: process is not defined
Copy the code

    Solution: After downloading and installing Process, configure it

    new webpack.ProvidePlugin({
         process: 'process/browser',
     }),
Copy the code

    . Move on to the next one

    After I solve the above two problems, the error message becomes a very accurate type, which is the same type of error message, but the information is different, the basic solution is the same, the error message will be attached to the solution, install, and then configure resolve:

    I don’t remember the specific error message, which is basically an error saying that a package can’t be found, undefined or something. The three errors I encountered during the upgrade process were caused by crypto-Browserify, buffer and stream-Browserify. After installing them respectively, you can configure them in webpack.config.js as prompted in the error

    My configuration information:

    module.export = { ... , resolve:{ ... , fallback:{ crypto: require.resolve('crypto-browserify'), buffer: require.resolve("buffer/"), stream: require.resolve("stream-browserify"), }, } }Copy the code

    However, when solving the stream, it could not be solved according to the above operation. It kept reporting errors, clearing the cache, restarting, uninstalling and reinstalling. Finally, I checked some materials and found that there was still another package to install

    npm install readable-stream
Copy the code

    The perfect solution

    At this point, the upgrade is almost complete.

    The rest of the work is based on some webpackage 5 features for their own projects to do some optimization, continue to another day