webpack@4.x配置问题解析与解决

"本文主要记录了一次在webpack@4.x环境下遇到配置文件无效问题的解决过程，并概述了webpack 4相较于之前版本的主要变化，包括对Node.js版本的支持、约定优于配置的原则、模块拆分、mode选项的引入、配置变动、性能优化及其它改进。" 在webpack 4中，最大的变化之一是不再支持Node.js v4，因为新版本的webpack及其插件大量使用了ES6语法，而Node.js v4对ES6的支持并不充分。因此，开发者需要确保他们的运行环境至少是Node.js v6或更高版本，以避免兼容性问题。 其次，webpack 4开始遵循“约定优于配置”的原则。许多配置选项都有了默认值，例如默认入口是`./src`，输出目录是`./dist`。这意味着在某些情况下，即使没有`webpack.config.js`配置文件，webpack依然可以进行基本的打包操作。然而，对于自定义配置的需求，开发者仍然可以创建配置文件来覆盖这些默认值。 此外，webpack 4将核心逻辑与命令行接口（CLI）分离，导致旧版本中的webpack被拆分为两个部分：处理逻辑的webpack和提供命令行功能的webpack-cli。如果在升级后遇到找不到webpack-cli模块的错误，通常是因为未单独安装这个模块。 模式（mode）选项的添加是另一个重要改变，提供了development、production和none三种选择。这个选项用于指示编译环境，可以减少手动配置的复杂性。尽管不指定mode不会阻止打包，但会发出警告，因此建议显式设置。mode可以通过命令行参数或在配置文件中设置。 在配置方面，webpack 4移除了commonChunksPlugin，转而使用optimization来处理公共模块提取。此外，loader的使用方法也有所调整，这并不是webpack 4独有的变化，而是从之前的版本就开始了。 性能优化是webpack 4的亮点，它提高了打包速度。自webpack 2以来，引入的Tree-shaking机制通过分析依赖关系构建新的依赖树，有效地排除未使用的模块，从而优化了代码体积。这种方法与早期的模块删除策略不同，但都能实现相似的优化效果。 总结，webpack 4.x带来了一系列重大改进，包括对新环境的支持、简化配置、增强的CLI、模式选项、配置重构以及性能提升，这些变化旨在提高开发者的效率并优化最终的生产构建。在遇到配置文件无效的问题时，应检查是否遵循了上述变化，例如Node.js版本、配置约定、mode设置等，以确保正确配置webpack 4项目。