Webpack之不同模式的区分打包

墨蓝 2024-04-17 16:03 65阅读 0赞

### 文章目录 ###

*  引入
 *  初步的区分打包
 *  更进一步的区分打包

# 引入 #

Webpack针对`development`和`production`两种模式各自有一些默认的配置，以及个人设置的一些配置。

例如在开发环境中，我们通常会使用`devServer`搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。

用过`create-react-app`的人肯定都知道这些脚手架工具针对不同的模式，也有不同的命令，例如：`yarn start`、`yarn dev`等。

# 初步的区分打包 #

新建两个文件，分别是：`webpack.dev.js`和`webpack.prod.js`。一个代表开发模式下打包所使用的配置文件，另一个则是生产环境下所使用的配置文件。

然后把原有的`webpack.config.js`内的内容拷贝到两个文件中去，对不同环境做差异化修改。例如，生产环境下就没必要使用`devServer`。最重要的当然还是修改`mode`。

接着对`package.json`进行修改，在`script`中添加两个命令：

"script":{
        
        ...,
        "dev": "webpack-dev-server --config ./webpack.dev.js",
        "build": "npx webpack --config ./webpack.prod.js"
    }

这样我们就可以直接使用`yarn dev`或`yarn build`来对应不同环境下的打包。

# 更进一步的区分打包 #

上面的那样的区分打包有一个很显然的问题，就是拆分出来的两个配置文件重复代码太多了。

那么自然的，我们就会想到代码的复用，再拆分一个通用的配置，然后原有的两个配置文件就编写不同模式下针对性的配置，使用的使用两者进行融合即可。

**webpack.dev.js：**

**webpack.prod.js：**

const merge = require('webpack-merge');
    const commonConfig = require('./webpack.common');
    const prodConfig = {
        
        mode: 'production'
    };
    
    module.exports = merge(commonConfig, prodConfig);

**webpack.common.js：**

可以看见，我们又使用了一个`webpack-merge`的库，它可以帮助我们事先通用配置和特殊配置的融合。