Vue2.x — WebPack 4.x Upgrade to Vue2.x — WebPack 5.x

The following article comes from Potter

Photo by Caspar Camille Rubin on Unsplash

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

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