Vue项目由webpack3.x迁移到webpack4的非全面指南

简介：
本文提供了一套从Webpack 3.x升级到Webpack 4.x在Vue项目中的实践指导，虽不详尽但能帮助开发者解决迁移过程中的常见问题。 最近我将一个使用Vue-cli构建的前端框架从webpack 3.x升级到了4.x版本，并在此记录下来以备将来参考及分享给其他人。 原来的项目环境是基于Vue-cli 2.9.3 构建，使用的Webpack 版本为3.x。为了进行此次更新，我们需要先对基础包进行如下更改： 1. **Webpack**：将其升级至4.28.3版本。 2. **webpack-dev-server**：更新到3.1.14版。 3. **webpack-cli**：安装或升级到3.2.1。 除此之外，还需要关注以下依赖的调整： - 更新vue-loader 至最新版本（如泡面直接升至了15），以便支持Vue.js的新特性； - 升级eslint-loader 到 1.7.1 ，确保与新Webpack版本兼容并解决启动时可能出现的问题； - 将happypack更新到5.0.1，以利用多线程加速编译过程； - 更新html-webpack-plugin 至3.2.0 版本，处理和新的webpack 4的兼容性问题。 - 引入一个新的包mini-css-extract-plugin ，该插件用于替代已废弃的extract-text-webpack-plugin，并负责将CSS提取为独立文件。 接下来是配置文件的调整： 1. **webpack.base.conf.js**：如果项目使用happypack，则需要修改vue-loader 的配置，去除原有的happypack设置并按照新格式进行。 2. **webpack.dev.conf.js**： - 引入`mode: development` ，这是Webpack 4的新特性，它可以根据开发环境自动调整配置； - 添加VueLoaderPlugin的引入语句，因为vue-loader从14版本升级到15后需要手动添加这个插件。 - 原有的happypack相关设置应当被注释掉或移除。 3. **webpack.prod.conf.js**： - 类似于开发环境配置，在这里也应引入`mode`和`VueLoaderPlugin` - 添加优化选项如runtimeChunk、minimizer（包含UglifyJsPlugin和OptimizeCSSPlugin）以及splitChunks配置，用于代码分割及性能提升。 以上步骤完成了从Webpack 3.x到4.x的升级工作。每个项目可能有特定的需求或配置问题，在实际操作中需根据具体情况调整。此外，确保所有依赖项都与新版本兼容，并在更新后进行全面测试以确认功能完整性和优化效果。