Summary content

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

1. Upgrade the plugin

webpack and webpack-cli

yarn add webpack@latest webpack-cli@latest

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

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

yarn remove fileloader url-loader

Replace the original location with the new configuration

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

Remove loader-utils

yarn remove loader-utils

Replace the interface

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

Turn off pollyfill

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

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

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