Webpack打包模式的应用

例如，如果想实现的目标是：在开发模式下用 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就内嵌了，不再成为独立的文件：

方法三：配置不同的 webpack.config.js （适用于多种模式差异较大的情况）