// webpack.dev.config.js module.exports = { devtool: 'eval', cache: true, performance: { // 性能设置,文件打包过大时，不报错和警告，只做提示 hints: false }, output: { // 打包时，在包中包含所属模块的信息的注释 pathinfo: true }, optimization: { // 使用可读的模块标识符进行调试 namedModules: true, // 使用可读的块标识符进行调试 namedChunks: true, // 设置 process.env.NODE_ENV 为 development nodeEnv: 'development', // 不标记块是否是其它块的子集 flagIncludedChunks: false, // 不标记模块的加载顺序 occurrenceOrder: false, // 不启用副作用 sideEffects: false, usedExports: false, concatenateModules: false, splitChunks: { hidePathInfo: false, minSize: 10000, maxAsyncRequests: Infinity, maxInitialRequests: Infinity, }, // 当打包时，遇到错误编译，仍把打包文件输出 noEmitOnErrors: false, checkWasmTypes: false, // 不使用 optimization.minimizer || TerserPlugin 来最小化包 minimize: false, removeAvailableModules: false }, plugins: [ // 当启用 HMR 时，使用该插件会显示模块的相对路径 // 建议用于开发环境 new webpack.NamedModulesPlugin(), // webpack 内部维护了一个自增的 id，每个 chunk 都有一个 id。 // 所以当增加 entry 或者其他类型 chunk 的时候，id 就会变化， // 导致内容没有变化的 chunk 的 id 也发生了变化 // NamedChunksPlugin 将内部 chunk id 映射成一个字符串标识符（模块的相对路径） // 这样 chunk id 就稳定了下来 new webpack.NamedChunksPlugin(), // 定义环境变量 new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), ] }
3. none
不进行任何默认优化选项。
配置：
// webpack.com.config.js module.exports = { mode: 'none', }
相当于默认内置了：
// webpack.com.config.js module.exports = { performance: { // 性能设置,文件打包过大时，不报错和警告，只做提示 hints: false }, optimization: { // 不标记块是否是其它块的子集 flagIncludedChunks: false, // 不标记模块的加载顺序 occurrenceOrder: false, // 不启用副作用 sideEffects: false, usedExports: false, concatenateModules: false, splitChunks: { hidePathInfo: false, minSize: 10000, maxAsyncRequests: Infinity, maxInitialRequests: Infinity, }, // 当打包时，遇到错误编译，仍把打包文件输出 noEmitOnErrors: false, checkWasmTypes: false, // 不使用 optimization.minimizer || TerserPlugin 来最小化包 minimize: false, }, plugins: [] }
4. production、 development、none 总结
production 模式下给你更好的用户体验：
较小的输出包体积
浏览器中更快的代码执行速度
忽略开发中的代码
不公开源代码或文件路径
易于使用的输出资产
development 模式会给予你最好的开发体验：
浏览器调试工具
快速增量编译可加快开发周期
运行时提供有用的错误消息
尽管 webpack4 在尽力让零配置做到更多，但仍然是有限度的，大多数情况下还是需要一个配置文件。我们可以在项目的初期使用零配置，在后期业务复杂的时候再配置。
5. 环境变量 process.env.NODE_ENV
第三方框架或库，以及我们的业务代码，都会针对不同的环境配置，执行不同的逻辑代码，例如：
我们可以通过以下方式定义环境变量：
方法一：webpack4 中 mode: 'production' 已经默认配置了 process.env.NODE_ENV = 'production' ，所以 webapck4 可以不定义
尽管 webpack4 中定义 mode 会自动配置 process.env.NODE_ENV ，那么我们就不需要手动配置环境变量了吗？