拥有 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
参数即可获得所有内容!