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
- 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
Top comments (0)