Webpack-(二)生产和开发模式

[1019483075]

拥有2个配置文件在webpack中是常见的模式。
一个典型的项目可能有：

• 用于开发的配置文件，配置热更新，跨域配置，端口设置等。
• 用于生产的配置文件，配置js压缩，代码拆分等。

虽然在较大的项目可能任然需要2个配置文件，但是在webpack4.0中，你可以在没有一行配置的情况下完成。

细心的朋友会发现在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  

打开./build/bundle.js，是一个bundle（包）文件，并没有压缩！

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

其实在终端里面发现，看构建完的大小，dev模式下文件大小是3.81KB,build模式下文件大小仅为966字节

production mode（生成模式）可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking等。
另一方面，development mode(开发模式）针对速度进行了优化，仅仅提供了一种不压缩的bundle。

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