例如,如果想实现的目标是:在开发模式下用 style-loader 内嵌更快;但在生产模式下提取出单独的 css 文件,让浏览器可以并行下载,提升下载速度。
方法一:webpack.config.js 配置导出函数,但是局限性大(mode属性的值只接受两种模式)
webpack.config.js 配置导出函数,但是局限性大,mode属性的值只接受两种模式。但在实际项目中,可能有多种环境,例如开发环境、测试环境、预发布环境,这种方法就受到了局限。
https://www.webpackjs.com/configuration/mode/#mode-none
方法二:借助 cross-env (跨平台通用)包命令,设置参数区分环境(推荐使用)
借助 cross-env (跨平台通用)包命令,设置参数区分环境,也是推荐使用的。
cross-env软件
https://github.com/kentcdodds/cross-env#readme
使用步骤
1)下载 cross-env 软件包到当前项目。
2)在package.json文件中配置自定义命令,传入参数名和值(会绑定到 process.env 对象下)。
3)在webpack.config.js 中区分不同环境使用不同配置。
4)重新打包观察。
示例:借助 cross-env (跨平台通用)包命令,设置参数区分环境
下载 cross-env 软件包
下载完成后,package.json文件中自动更新了依赖:
在package.json中配置自定义命令,传入参数名和值
在webpack.config.js 中区分不同环境使用不同配置
打包观察
“build”: “cross-env NODE_ENV=production webpack --mode=production”
“build”: “cross-env NODE_ENV=development webpack --mode=production”
修改package.json文件:
打包后,CSS就内嵌了,不再成为独立的文件: