Since the release of Webpack 4.x, it has won the favor of code farmers alone. The project of our company is a VUE project based on WebPack 3.x version, which was constructed by VUE-CLI tool at that time. After the development of the project, we found that the packaging performance was low, and the project was multi-page, so the packaging files needed to be separated. Webpack’s original CommonsChunkPlugin was having trouble meeting its needs and wanted to replace it with SplitChunksPlugin, so the grueling upgrade process began.

Now I record my upgrade process as follows, hoping to provide some reference value to friends who need to upgrade VUE project.

Upgraded code

Step 1: Usevue-cliTool to create a simple Vue Webpack project

vue init webpack vue-webpack4-v2
Copy the code

Open the package.json file and check the webpack version information. Find that webPack is still 3.x

"Webpack" : "^ 3.6.0," "webpack - bundle - analyzer" : "^ 2.9.0", "webpack - dev - server" : "^ 2.9.1", "webpack - merge" : "^ 4.1.0." "Copy the code

Step 2: Upgrade the NPM package

Because there are many packages to be upgraded, it is difficult to operate one by one. Therefore, it is recommended to use nPM-check to check and update the package version.

Because manual update is too troublesome, you can run the NPM -check -u command to batch update the NPM package

Packages to be added:

  • “Webpack – cli” : “^ 3.1.0”
  • “Mini – CSS – extract – the plugin” : “^ 0.4.1”

Packages to remove (as well as plug-ins that reference this package in the WebPack configuration) :

  • “Extract – text – webpack – plugin” : “^ 3.0.0”
  • “Uglifyjs webpack – plugin” : “^ 1.1.1”
  • “Optimize – the CSS – assets – webpack – plugin” : “^ 5.0.0”

Note:

  • “Eslint “: “^5.3.0” version number not too high, change to “^4.0.0”

Step 3: WebPack configuration upgrade

See the official upgrade documentation To V4 from V3

Major changes the build/webpack. XXX. Conf. Js file

Step 4: Configure and upgrade vue-Loader

Migrate from V14 by referring to the official upgrade documentation

Major changes the build/vue – loader. Conf. Js and build/webpack. XXX. Conf., js file

Note:

  • To get rid ofbuild/webpack.prod.conf.jsIn theOptimizeCSSPluginThe plug-in

conclusion

After the above four steps, the project can basically run successfully, but my ability is limited, some configuration principles are also vaguely understood, but the process of growth is to dare to continue to fail and try, so as to step by step from unfamiliar to familiar. As the saying goes, “The road ahead is long, I see no end. I will search high and low.”

reference

  • Vue project upgrade to Webpack 4.x preliminary pit summary
  • Vue Cli 3.0 has been released with WebPack 4.x and you don’t have to upgrade yourself anymore