Vue2. X - WebPack 4.x Upgrade to Vue2. X - WebPack 5.x

Summary content

• Upgrade webpack related plugins
• loader configuration adjustment
• Remove loader-utils, use webpack5 built-in interface
• Summarize

1. Upgrade the plugin

1. webpack and webpack-cli

yarn add webpack@latest webpack-cli@latest

1. Upgrade plugins and loader

yarn add html-webpack-plugin@latest mini-css-extract-plugin@latest css-loader@latest less-loader@latest sass-loader@latest svg-sprite-loader@latest

2. Configuration Adjustments

1. Loader configuration adjustment

1. Since webpack5 has a built-in resource module, you can directly remove the plugin

yarn remove fileloader url-loader

1. Replace the original location with the new configuration

2. Remove loader-utils and use the built-in interface of webpack5

1. Remove loader-utils

yarn remove loader-utils

1. Replace the interface

3. Turn off the built-in pollyfill in @babel/preset-env and use core-js 3.x

1. Turn off pollyfill

1. Use core-js

3. Problems encountered

1. Buffer is not defined

2. Style loss problem

• Phenomenon:

At this time, there is a sense of powerlessness. I guess it is a loader problem, but the whole project has too much content, so it is very difficult to troubleshoot the problem, so I thought of a solution, which is to re-create a feeling project to test to see which loader it is. Something went wrong. After a arduous round of testing, it was found to be a vue-loader problem. It is enough to update to the 15.x version. The reason: 16.x+ is for vue3 code location

3. Unable to package problem

• Effect:

I really have no clue about this error, look at the package.json packaging command

"scripts": {
"build": "cross-env node build/build.prod.js ENV_TYPE=1 platform=pc",
}

The most suspicious thing is whether the version of cross-env does not match, go to github to see the documentation

Check the local environment node: v14.14.0 , cross-env: ^5.2.0 , go to update the cross-env version, and after the update, npm run build, still report the same error above.

When I saw that the error was related to npm, I had an idea: I directly executed the command, webpack --config build/webpack.prod.conf.js, to see if I could get more error information

Tip: The devtools configuration has been adjusted, check the devtool documentation

Directly set devtool to false, add SourceMapDevToolPlugin, and npm run build again to package successfully~~~

Summarize

• Divide complex problems into simple problems to solve them faster (for example: the loader problem and npm packaging problem encountered above are all complex problems into simple problems, and then get more information and solve the final complex problem)

---

references

• Upgrade from v4 to v5
• Uncaught ReferenceError: Buffer is not defined
• https://babeljs.io/docs/en/babel-preset-env#usebuiltins
• https://webpack.js.org/api/loaders/#thisgetoptionsschema
• https://webpack.js.org/configuration/devtool/#devtool
• https://github.com/vuejs/vue-loader/issues/1919

Above: If you find any problems, please leave a message and point it out, and I will correct it in time