webpack实战——生产环境配置【上】

流眸

发布于 2020-09-10 15:16:18

9860

发布于 2020-09-10 15:16:18

文章被收录于专栏：前端技术分享|前沿资讯|读书分享

前言

这是webpack实战系列笔记的第10篇记录——生产环境配置【上篇】。

在前面的几篇中，介绍了webpack的大部分使用方法，使用其实就是为了上线，牵扯到生产环境，就会出现新的问题，比如：

如何让用户更快的加载资源
如何压缩资源
如何添加环境变量优化打包
如何最大限度的利用缓存
...

在生产环境配置篇中，将会一一介绍。本篇大致分为三个小篇，以上中下结构拆开描述。本篇描述：环境配置的封装、开启production模式、环境变量。

1. 环境变量的使用

在开发环境中，我们设置过mode模式，而生产环境中，我们这需要更多的配置，如：mode、环境变量、版本号等，webpack可以使用两种方式来按照不同环境采用不同配置。

1.1 使用相同配置文件

例如之前的webpack.config.js，可以在构建开始前将当前环境作为一个变量传进去，然后在js中通过判断来决定使用某个配置：

// package.json
{
    ...
    "scripts": {
        "dev": "ENV=development webpack-dev-server",
        "build": "ENV=production webpack"
    }
}

// webpack.config.js

const ENV = process.env.ENV;
const isProd = ENV === 'production';
module.exports = {
    output: {
        filename: isProd ? 'bundle@[chunkhash].js' : 'bundle.js'
    },
    mode: ENV,
}

从上配置可以看出，首先通过npm脚本传入了一个ENV的环境变量，而后在输出时，webpack中用三元表达式判断环境，生产环境则添加哈希值为版本信息，本地则直接输出。

1.2 多配置文件

顾名思义：为不同环境创建不同的配置信息文件。

例如，可以单独创建一个webpack.development.config.js来配置开发环境信息，再创建一个webpack.production.config.js来配置生产环境信息。然后在package.json中修改：

{
    ...
    "scripts": {
        "dev": "webpack-dev-server --config=webpack.development.config.js",
        "build": "webpack --config=webpack.prodection.config.js"
    }
}

可以看到，上述的json文件中，通过 --config 来指定了打包时用哪一个文件，但其实会有一些小问题，比如两个配置文件会有重复的内容，不利于维护等，这时可以将重复配置提取出来写成公共配置文件，比如再新建一个文件 webpack.common.config.js 来存放公共部分：

// webpack.common.config.js
module.exports = {
    entry: './src/index.js',
    // 公共配置
    ...
}

写完之后，在开发与生产环境的webpack配置文件中，都引入该公共文件，然后加上自身的专属配置即可。

2. production模式

在前面我们多次用到一个叫做mode的配置，其实这个配置是webpack4及之后才新添加的一个配置项，开发者可以直接使用这个配置来切换打包模式。例如：

// webpack.config.js
module.exports = {
    ...
    mode: 'production'
}

这便意味着当前模式处于生产环境，那么webpack则会自动添加许多适用于生产环境的配置项，减少手动操作配置。而目的也是为了提供更加有利的开发环境，更少的代码，更少的配置，做更多的事儿。

然而，多数情况下，仅仅配置mode是难以达到我们希望的需求的，因此还是需要用到其他与生产环境配置相关联的其他配置项。

3. 环境变量

通常，我们需要为生产环境和本地环境添加不同的环境变量，在webpack中可以使用DefinePlugin来进行设置。

3.1 字符串类型

如：

// webpack.config.js
const webpack = require('webpack');
module.exports = {
    entry:'./src/index.js',
    output: {
        filename: 'bundle.js'
    },
    mode: 'production',
    plugins: [
        new webpack.DefinePlugin({
            ENV: JSON.stringify('production')
        })
    ]
}

// index.js
console.log(ENV);

如上所示。通过配置DefinePlugin设置了ENV的环境变量，最终页控制台上打印的字符串会是production。

注意上面用到了JSON.stringify，因为DefinePlugin在替换环境变量时对于字符串类型的值是完全替换，如果不加的话，在替换后就会成为变量名而不是字符串。因此需要添加JSON.stringify。

3.2 其他类型

在上面演示了字符串类型，当然也可以设置其他类型的环境变量。

// webpack.config.js
module.exports = {
    ...

    plugins: [
        new webpack.DefinePlugin({
            ENV: JSON.stringify('production'),
            IS_PRODUCTION: true,
            ENV_ID: 80808888,
            CONSTANTS: JSON.stringify(){
                TYPES: ['foo', 'bar']
            }
        })
    ]
}

3.3 其他说明

很多框架中都会采用process.env.NODE_ENV来作为一个区别开发环境和生产环境的变量。

process.env是Node.js用于存放当前进程环境变量的对象
NODE_ENV则可以让开发者指定当前的运行时环境，值为production时代表生产环境。

在上述中，当库和框架在打包时如果发现是生产环境，那么就会去掉一些开发环境中的代码和配置，如警告信息，日志打印，断点等，也有助于提升生产环境的代码运行速度，并且优化包体积。

具体配置如下：

// webpack.config.js
module.exports = {
    ...

    plugins: [
        new webpack.DefinePlugin({
            process.env.NODE_ENV: 'production'
        })
    ]
}