Webpack Vue MultiplePage

Overview:

The article provides a guide on how to upgrade a webpack + Vue multi-page project to webpack 4 and optimize its build speed. The author explains the process of upgrading webpack, installing necessary dependencies, and optimizing the build speed by using plugins and techniques such as parallel processing and DLL packaging. The article also covers adding ES6+ support with Babel 7.

Features:

• Webpack 4 Upgrade: Steps to upgrade webpack to version 4, including installing necessary dependencies and modifying configurations.
• Build Speed Optimization: Techniques and plugins to optimize the build speed, such as parallel processing, using TerserPlugin, and pre-packaging common code.
• ES6+ Support: Steps to add ES6+ support to the project using Babel 7, including installing dependencies and configuring Babel plugins and presets.

Installation:

To upgrade a webpack + Vue multi-page project to webpack 4 and optimize its build speed, follow these steps:

1. Webpack 4 Upgrade:

   • Upgrade and install necessary dependencies:
     • webpack-cli
     • webpack 4.x
     • mini-css-extract-plugin (replaces extract-text-webpack-plugin)
     • Other related loaders and plugins such as css-loader, file-loader, url-loader, vue-style-loader, and vue-template-compiler
   • Modify the configuration:
     • Set the build mode in the mode option
     • Replace the extract-text-webpack-plugin configuration with the mini-css-extract-plugin configuration
     • Use the optimization option to configure file splitting
     • Upgrade vue-loader to version 15 and use a webpack plugin for proper usage
     • Upgrade html-webpack-plugin to the next version for resource file injection
     • Compress files using optimize-css-assets-webpack-plugin and terser-webpack-plugin

2. Build Speed Optimization:

   • Use the speed-measure-webpack-plugin to analyze build time
   • Enable the parallel option for the TerserPlugin and use thread-loader or HappyPack for multi-threaded transformation of loaders
   • Pre-package common code using DllPlugin and update the webpack configuration to use webpack.DllReferencePlugin and manually reference the generated DLL files in HTML

3. ES6+ Support:

   • Install the following dependencies: @babel/core, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-decorators, @babel/plugin-syntax-dynamic-import, @babel/plugin-transform-runtime, @babel/preset-env, @babel/runtime, babel-loader, and @babel/polyfill
   • Configure Babel 7 by using the new namespacing @babel and specifying options for @babel/plugin-transform-runtime

Summary:

The article provides detailed steps on how to upgrade a webpack + Vue multi-page project to webpack 4 and optimize its build speed. It covers the installation of necessary dependencies, modification of webpack configurations, and usage of plugins to improve build performance. Additionally, the article explains how to add ES6+ support using Babel 7. The provided guide is a valuable resource for developers working on multi-page projects with webpack and Vue.