webpack-生产和开发模式

拥有 2 个配置文件在 webpack 中是的常见模式。

一个典型的项目可能有：

用于开发的配置文件，配置热更新、跨域配置、端口设置等
用于生产的配置文件，配置 js 压缩、代码拆分等
虽然较大的项目可能仍然需要 2 个配置文件，但在 webpack4 中，你可以在没有一行配置的情况下完成

webpack4 引入了 production(生产) 和 development(开发) 模式。

细心的朋友会发现在 npm run build 打包后会有一段报警提示

'mode' 选项尚未设置，webpack 将回退到 'production'。 将 “mode” 选项设置为 'development' 或 'production' 以启用每个环境的默认值。 您还可以将其设置为 'none' 以禁用任何默认行为。 了解更多

1、打开 package.json 并填充 script 部分，如下所示：

"dev": "webpack --mode development",
"build": "webpack --mode production"

2、运行 npm run dev
打开 ./dist/main.js 文件，是一个 bundle(包) 文件，并没有压缩！

3、运行 npm run build
可以看到 ./dist/main.js 文件已经被压缩了

其实在终端里也能发现，看构建完的大小， dev 模式下文件大小是 3.8 KB， prod 模式下文件大小仅为 960 字节

production mode(生产模式) 可以开箱即用地进行各种优化。 包括压缩，作用域提升，tree-shaking 等。

另一方面，development mode(开发模式) 针对速度进行了优化，仅仅提供了一种不压缩的 bundle

在 webpack4 中，可以在没有一行配置的情况下完成任务！ 只需定义 –mode 参数即可获得所有内容！