Webpack打包模式

打包模式#

打包模式 ：告知Webpack使用相应模式的内置优化

分类：

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

设置：

1. 方式1：在webpack.config.js配置文件设置mode选项

   module.exports={
       // ...
       mode:'production'
   }

2. 方式2：在package.json命令行设置mode参数

   "scripts":{
       "build":"webpack --mode=production",
       "dev":"webpack serve --mode=development"
   }

注意： 命令行设置的优先级高于配置文件的 ，推荐用命令行设置

实测#

首先将之前在配置文件webpack.config.js中配置的mode注释起来，我们在package.json命令行中测试

package.json命令行配置：

"scripts": {
    ...
    "build": "webpack --mode=production",
    "dev": "webpack serve --open --mode=development"
},

以 build 作为生产模式的命令

以 dev 作为开发模式的命令

打包模式的应用#

需求：在开发模式下用 style-loader 内嵌js更快，在生产模式下单独提取css

方案1 ：webpack.config.js配置导出函数，但是局限性大（只接受2种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

步骤：

1. 下载cross-env软件包到当前项目

   npm i cross-env --save-dev

2. 配置自定义命令，传入参数名和值（会绑定到process.env对象下）

   "scripts": {
       ...
       "build": "cross-env NODE_ENV=production webpack --mode=production",
       "dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
   },

3. 在webpack.config.js区分不同环境使用不同配置

   module: {
       rules: [
           {
               test: /\.css$/i,
               // use: ['style-loader', 'css-loader'],
               // use: [MiniCssExtractPlugin.loader, 'css-loader'],
               // 根据命令行参数判断用哪一种loader
               use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader'],
           },
           {
               test: /\.less$/i,
               use: [
                   // compiles Less to CSS
                   // 注意若要单独打包css则style-loader不可混用
                   // 'style-loader',
                   process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                   'css-loader',
                   'less-loader',
               ],
           },
       ]
   }

4. 重新打包观察两种配置区别

   先看NODE_ENV=production的效果：

   

   生产模式单独打包css

   接着我们在package.json修改命令行，将NODE_ENV改为development:

   "build": "cross-env NODE_ENV=development webpack --mode=production",

   再次打包：

   

   结果发现css内嵌到了js中

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