- Webpack+Babel入门与实例详解
- 姜瑞涛
- 444字
- 2024-01-25 17:11:58
1.3.2 Webpack打包模式mode
我们在执行上面命令的时候,命令行控制台会出现警告信息,告诉我们没有设置mode参数,Webpack将会使用默认的production模式。
Webpack的打包模式共有三种:production、development和none,这三种模式是通过mode参数来指定的。production和development这两种模式会分别按照线上生产环境和本地开发环境进行一些优化处理,而none模式会保留原始的打包结果。例如,production模式是给生产环境打包使用的,打包后的bundle.js文件代码是压缩后的,1.3.1节打包生成的main.js文件代码就被压缩成了一行。
在我们学习Webpack基本功能的时候,要避免额外的优化处理,因为它们会干扰我们对打包细节的理解。在第7章讲解Webpack性能优化之前,我们都会把mode参数设置为none模式来进行学习。
我们可以把打包命令改成npx webpack--entry./a.js-o dist--mode=none,该命令通过配置mode参数来告诉Webpack采用何种打包模式。现在把打包模式改成none模式,这样就不会压缩代码了。需要注意的是,该模式会保留打包的原始构建信息,因此打包后的代码会有几十行。
虽然我们可以在打包命令后面配上mode参数来告诉Webpack采用何种打包模式,但当命令参数过长的时候,使用起来就会不方便。此时,我们可以选择使用Webpack的配置文件。