DEV Community

FreeCoderX
FreeCoderX

Posted on

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

Image description

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

  1. Remove loader-utils

yarn remove loader-utils

  1. Replace the interface https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20220211145351.jpg

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

  1. Turn off pollyfill

Image description

  1. Use core-js

Image description

3. Problems encountered

1. Buffer is not defined

Image description

2. Style loss problem

  • Phenomenon:

Image description

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:

Image description

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

Image description

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

Image description

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

Image description

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

Image description

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

Top comments (0)