Vue2. X - WebPack 4.x Upgrade to Vue2. X - WebPack 5.x
Tags: webpack, vue
Published: 2022-02-15 01:45:25

## 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`
    
2. 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`
    
2. Replace the original location with the new configuration
    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v2717vbu7p77uv3o2ro.jpg)  

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

1. Remove loader-utils
    
`yarn remove loader-utils`
    
2. Replace the interface
![https://cdn.jsdelivr.net/gh/yxw007/BlogPicBed@master//img/20220211145351.jpg](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhj3261u545hmexr9c3c.jpg)
    
2. Use core-js
    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek5qqrgcwn5yztj2tdnx.jpg)
    

## 3. Problems encountered

### 1. Buffer is not defined

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oabjhfkascmh7mgszwy7.jpg)

### 2. Style loss problem

- Phenomenon:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqwe1vif6hbj2tgoa2b1.png)

> 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](https://github.com /yxw007/vue2.x-webpack.git)

### 3. Unable to package problem

- Effect:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5vxf6wh8ud91a5fpmzr.png)
    
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cjnuc6s3dejqrdwq602.jpg)
    
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36j25kxd1fzwafbp7nui.jpg)
    
Tip: The devtools configuration has been adjusted, check the devtool documentation
    

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5wguw3vpyjteu7uqu6e.jpg)
    
Directly set devtool to false, add SourceMapDevToolPlugin, and npm run build again to package successfully~~~

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upm9gw2hfpyeeamcgccs.jpg)

## 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](https://webpack.docschina.org/migrate/5/)**
- **[Uncaught ReferenceError: Buffer is not defined](https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined)**
- [https://babeljs.io/docs/en/babel-preset-env#usebuiltins](https://babeljs.io/docs/en/babel-preset-env#usebuiltins)
- [https://webpack.js.org/api/loaders/#thisgetoptionsschema](https://webpack.js.org/api/loaders/#thisgetoptionsschema)
- [https://webpack.js.org/configuration/devtool/#devtool](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