vue cli升级webapck4总结

升级Vue CLI中的Webpack至4.0：步骤与注意事项

Webpack 4已经有一段时间了，其插件系统日趋成熟稳定。考虑到我们对Webpack 3的打包速度存在诸多不满，我决定对当前项目进行升级，借此机会实践一下Webpack 4的魅力。

一、Webpack 4的新特性

1. 零配置：可能是受到了Parcel的启发，Webpack团队认识到其配置确实复杂，不利于新手入门。Webpack 4开始支持零配置启动。但请注意，这里的零配置只是默认了entry和output，即默认入口为./src，默认输出为/dist。

2. 模式选择（mode）：提供了两个可选模式，即production和development。作为必选项，mode在构建时不可或缺。在production模式下，Webpack会自动进行代码压缩和优化；而在development模式下，则注重开发体验，如增量构建、注释和提示等。

3. SideEffects：通过该配置可以大幅度减小打包体积。当模块的package.json中配置sideEffects为false时，表明该模块无副作用，Webpack可以安全地清除重复导出的代码。

4. 模块类型：Webpack 4提供了五种模块类型，包括json、webassembly、javascript/auto、javascript/esm和javascript/dynamic，以满足不同场景的需求。

5. JSON支持：不仅支持本地处理JSON，还支持对JSON的Tree Shaking。当使用ESM语法import json时，Webpack会消除掉JSON Module中未使用的导出。

6. 优化（optimization）：Webpack 4默认启用了许多优化功能，如模块拆分和运行时拆分等。对于那些需要自定义的缓存策略，新增了optimization.splitChunks和optimization.runtimeChunk。

二、升级步骤

我将升级过程分为两步：升级相关依赖插件和优化Webpack配置文件。接下来详细介绍如何将Vue CLI中的Webpack升级到4.0。

我们需要更新项目中的依赖包。使用npm或yarn更新vue-cli、vue-loader和webpack等相关依赖至版本。然后，我们需要对Webpack配置文件进行优化。根据Webpack 4的新特性，我们可以简化配置文件，并利用新特性提高打包效率。例如，利用零配置、模式选择和SideEffects等。

在升级过程中，需要注意一些细节和可能出现的问题。例如，升级后可能需要调整一些插件的配置，或者解决一些兼容性问题。遇到问题及时解决，可以参考官方文档或社区中的解决方案。

升级Webpack至4.0还是相对顺利的。升级后，我们可以享受到更快的打包速度、更小的打包体积和更好的开发体验。我们还可以利用Webpack 4的新特性，进一步优化项目结构和性能。希望这篇文章能帮助大家顺利升级Webpack，并充分利用其新特性提高项目的开发效率和性能。插件升级之旅：狼蚁网站的SEO优化之路

在数字化世界中，SEO优化对于网站的流量和排名至关重要。为了让狼蚁网站更上一层楼，我们决定对一系列插件进行升级，确保它们与的技术趋势相匹配。这些插件包括但不限于webpack、css-loader等，它们各自在网站优化中扮演着不可或缺的角色。

以下是我们需要升级的插件列表及其版本：

webpack@4.4.1

css-loader@0.28.10

extract-text-webpack-plugin@4.0.0-beta.0

file-loader@1.1.11

html-webpack-plugin@3.1.0等。每一个都有其独特的功能和重要性，对网站的整体性能和用户体验产生直接影响。升级它们可以确保我们的网站具有更高的性能和稳定性。我们相信通过升级这些插件，可以解决可能出现的潜在问题，进一步提升网站的流畅度和用户体验。

除了插件的升级，我们还对配置文件进行了更新。特别是webpack.dev.conf.js，这是开发环境中的关键配置文件。在webpack 4中，许多优化都是针对生产环境的，因此我们在开发环境中对配置文件进行了适当的调整。例如，我们删除了不再需要的插件，如webpack.NamedModulesPlugin和webpack.NoEmitOnErrorsPlugin等，这些功能在webpack 4中已经默认配置。我们设置了mode为'development'，以适应开发环境的需求。

另一个重要的改动是webpack.production.conf.js，这个文件在webpack 4中的改动最大，影响也最大。其中最大的变化是使用了optimization.splitChunks替代了CommonsChunkPlugin。这个新功能可以实现更灵活的配置，更好地抽取代码中的共用部分，实现最佳的缓存策略。通过这一改动，我们可以期待打包速度和代码体积的优化，从而带来显著的效果。根据我们的实际体验，打包速度大约优化了70%，这对我们的工作流程产生了巨大的影响。这次升级是一次成功的尝试，让我们感受到了技术进步的魅力。我们相信，通过不断的优化和升级，狼蚁网站将为用户提供更流畅、更优质的体验。期待未来的更多可能性！