区分开发和生产环境配置

配置合并或三元表达式

webpack开发环境和生产环境配置文件有两种方式

• 获取当前环境变量process.env.NODE_ENV，针对开发环境或者生产环境在配置文件中使用三元表达式使用相应的loader或者plugin.
• webpack-merge合并配置文件

打包变量

区分开发或生产环境需要安装cross-env

yarn add cross-env -D

在package.json件中添加以下

"dev": "cross-env NODE_ENV=development",
"build": "cross-env NODE_ENV=production"

上述配置以后可以通过process.env.NODE_ENV的值来判断当前环境是开发环境还是生产环境

::: tip
建议使用webpack-merge进行配置的合并，因为这很清楚的看见在开发环境和生产环境中分别使用了哪些loader或者plugin
定义以下文件

• webpack.config.base.js 基础配置，开发环境和生产环境共用
• webpack.config.dev.js 开发环境配置
• webpack.config.pro.js 生产环境相关配置

package.json配置相关命令

• "dev": "cross-env NODE_ENV=development webpack-dev-server --config=./src/config/webpack.config.dev.js"
• "build": "cross-env NODE_ENV=production webpack --config=./src/config/webpack.config.pro.js"
  :::

通过上面的配置我们可以通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境，但总是通过process.env.NODE_ENV来判断，
显得累赘，通过webpack内置插件DefinePlugin配置全局变量
webpack.config.pro.js

 new webpack.DefinePlugin({
      ENV: JSON.stringify("production") 
	}),

webpack.config.dev.js

 new webpack.DefinePlugin({
      ENV: JSON.stringify("development") 
	}),

在js文件中可以通过全局变量ENV的值来进行判断
::: warning
通过插件webpack.DefinePlugin定义的全局变量在配置文件自身无法获取，只能在入口文件依赖入口文件的文件中使用定义的全局变量。
这也就是以为着要想在配置文件中区分当前环境是开发环境还是生产环境，需要使用process.env.NODE_ENV
:::

处理js

开发环境和生产环境都需要借助于babel-loader处理es6，所以在基础配置文件里配置babel-loader

js共通处理

webpack.config.base.js

{
    test: /\.js(x)$/,
    use: ["babel-loader"],
    exclude: /node_modules/
},

根目录下新建 .babelrc

{
    "presets": [["env", {
      "modules": false
    }]],
    "plugins":[["@babel/transform-runtime",{
      "corejs": 3
    }]]
}

生产环境js打包优化

设置mode: 'production'webpack会自动启用生产环境下相关插件进行优化，比如js压缩，去除注释，console以及debugger等。但是我们还需要进行相关配置进行js打包优化。

处理图片资源

开发环境和生产环境都借助url-loader来处理
webpack.config.base.js

 {
	test: /\.(png|svg|jpg|gif)$/,
	use: {
	  loader: 'url-loader',
	  options: {
		limit: 8192
	  }
	}
  }

file-loader和url-loader

url-loader
url-loader可以将在指定大小（limit）内的图片资源转化成base64格式，超出指定格式时会采用file-loader来处理图片，在实际配置时我们要注意以下几点
::: tip

• 在安装url-loader时需要安装file-loader
• 配置文件中避免出现对图片资源同时配置file-loader和url-loader，这里建议只配置url-loader
• file-loader的options相关配置可以写在url-loader中
  :::

处理css

在开发环境中，借助于style-loader将生成的样式插入到html的head标签中，而在生产环境中需要把css单独打包成文件,因此需要分别配置
webpack.config.dev.js

{
	test: /\.css$/,
	use: [
	  'style-loader',
	  'css-loader',
	  'postcss-loader',
	]
  },

webpack.config.pro.js

{
	rules: [
		{
			test: /\.css$/,
			use: [
			  MiniCssExtractPlugin.loader,
			  'css-loader',
			  'postcss-loader',
			]
		 },
	],
	plugins: [
	    new MiniCssExtractPlugin()
    ]
}
 

在生产环境中处理需要将css样式规则单独打包成文件，好需要考虑以下问题

• 重新发版本导致的样式文件缓存问题： 文件名带上哈希值
• css压缩 借助optimize-css-assets-webpack-plugin
• 未使用样式规则的清除 purifycss-webpack
  webpack.config.pro.js

const path = require('path')
const  {smart} = require('webpack-merge');
const  base = require('./webpack.config.base');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require('glob');
const PurifyCssPlugin = require('purifycss-webpack');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = smart(base, {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ]
      },
      {
        test: /\.sty(lus)$/,
        use: [
          {
            loader:  MiniCssExtractPlugin.loader,
            options: {
              esModule: true,
            }
          },
         
          'css-loader',
          'postcss-loader',
          'stylus-loader',
        ]
      },
    ]
  },
  optimization: {
    minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash:5].css',
      chunkFilename: '[id].[hash:5].css',
    }),
    new PurifyCssPlugin({
      paths: glob.sync(path.join(__dirname, '../*.html'))
    })
  ]
})

通过上面的配置我们实现了在生产环境中对css进行压缩和未使用css规则的删除。

源码