Vue项目从webpack3.x升级webpack4不完全指南

在讨论Vue项目从webpack3.x升级到webpack4.x的不完全指南时，我们首先要认识到webpack是一个用于现代JavaScript应用程序的静态模块打包器。它通过打包应用程序所需的资源来提供模块化、调试和性能优化等功能。而Vue.js是一个构建用户界面的渐进式JavaScript框架，与webpack结合使用能够提供高效的服务端渲染及单文件组件等强大功能。下面，我们将深入探讨升级过程中所涉及的关键知识点。 **升级webpack版本**升级的第一步通常是从更新项目的依赖包开始。在文档中提到，泡面将webpack从3.x版本升级到了4.28.3版本。需要特别注意的是，随着webpack的升级，其他依赖于webpack的插件和加载器也需要进行相应的版本升级。如webpack-dev-server更新到3.1.14版本，webpack-cli更新到3.2.1版本。在升级过程中，泡面还遇到一个无法使用happypack来挂载vue-loader的问题，后来将配置修改回原样。 **加载器（Loaders）和插件（Plugins）的更新**在webpack中，加载器和插件是构建流程中的核心概念。加载器负责转换代码，插件负责更复杂的任务，比如热更新、代码优化等。文档中提到了几个关键的加载器和插件更新： - vue-loader升级到版本15，它是用来处理Vue单文件组件的加载器。 - eslint-loader更新到版本1.7.1，用于在构建时检测JavaScript代码中的语法和风格错误。 - happypack更新到版本5.0.1，这是一个用于通过线程池来加速webpack构建过程的插件。 - html-webpack-plugin更新到版本3.2.0，这个插件用于简化HTML文件的创建，适用于webpack中的HTML资源。 - mini-css-extract-plugin，它用于替换旧版本webpack中extract-text-webpack-plugin，用于将CSS提取到单独的文件。 **webpack配置文件的修改** webpack配置文件是整个构建过程的核心。在升级webpack版本之后，泡面对webpack.base.conf.js、webpack.dev.conf.js和webpack.prod.conf.js这几个配置文件进行了修改。对webpack.base.conf.js进行修改时，泡面发现无法使用happypack来挂载vue-loader。因此，需要将配置中的happypack loader注释掉，并恢复到直接使用vue-loader。在webpack.dev.conf.js中，引入了mode配置项，并且添加了vue-loader的插件VueLoaderPlugin。由于是从vue-loader 14版本升级到15版本，泡面按照官方文档进行了迁移，但在此过程中，遇到了问题，所以取消了使用happypack来挂载vue-loader。在webpack.prod.conf.js中，泡面添加了optimization选项，这是一个在webpack 4.x版本中新增的配置项，用于优化和压缩代码。其中包括了runtimeChunk、minimizer和splitChunks等子选项，可以进一步优化输出的文件，提高加载速度。 **废弃的插件**在升级过程中，一些插件由于不再兼容webpack 4.x而被废弃。文档中列举了几个被废弃的插件，如webpack.DefinePlugin、webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin。这些插件在webpack的旧版本中可能会有重要作用，但在新版本中它们的功能或者被替代，或者不再需要。 **总结**文档中介绍的升级过程涉及到的技术点非常丰富，包括了从依赖更新到配置文件调整，再到废弃插件处理的方方面面。在实际操作中，每个项目可能都有自己特定的情况，因此升级指南也只能做到“不完全”，还需要开发者根据项目实际需要进行适当的定制和调整。升级到webpack 4.x版本，可能会带来更好的性能和优化，但同时也要求开发者了解新版本中的新特性和新概念。希望这份指南能够帮助到在升级道路上的开发者，让他们在遇到问题时有所参考，避免踩坑。