webpack入门学习笔记17 —— webpack区分不同环境

1. 写在前面

项目开发过程中，大致可以分为两个状态：开发状态和生产状态。在这两种状态下，webpack在打包编译的时候，会采用不同的方式，比如代码是否压缩等。

与这两种状态相对应，webpack的配置文件也要分为两个，一个用于开发时候的配置，一个用于上线生产时候的配置。但是在实际的开发过程中，一般不是定义两个配置文件，而是三个，分别为：开发配置、生产配置和公有配置。这样一来，比较便于管理webpack，更清晰地区分不同模式下的编译。

下面，我们就来看一下，这三种配置文件应该如何定义，以及他们之间应该如何联系起来。

2. 定义webpack公有配置文件

webpack的公有配置文件的作用，就是将开发环境和生产环境共同的配置抽离出来，比如js文件和css文件的编译规则，编译的入口文件等。下面我们编写一个最简单的公有配置文件： webpack.base.js

let path = require("path");
let Webpack = require('webpack');

module.exports = {
    entry: "./src/index.js",    // 打包的入口文件，默认是src目录下的index.js文件
    output: {                   // 配置文件默认是dist目录下的main.js文件
        filename: "Feng.js",    // 出口文件的文件名
        path: path.resolve(__dirname, "build"), //出口文件的路径
    }
}

公有配置文件完成之后，我们一般是不用这个文件进行webpack编译的，而是在这个基础之上，再去定义开发环境的配置和生产环境的配置。下面我们就介绍如何在公有配置文件的基础之上，完成另外两个配置文件。

3. 定义开发环境和生产环境的配置文件

这里我们需要使用一个第三方包： webpack-merge ，见名知意，这个包的作用就是把两个webpack配置文件合并成一个，用作开发或者生产环境的配置。首先执行以下代码，安装该包：

npm i webpack-merge

安装完成之后，我们就可以使用了。比如我们要在 webpack.base.js 文件的基础上来定义开发环境的配置 webpack.dev.js，那么可以使用如下方式：

let { smart } = require("webpack-merge");       // 引入smart方法，这是合并配置文件的方法
let base = require("./webpack.base.js");        // 引入公有配置文件

module.exports = smart(base, {
    // 下面就可以正常进行开发环境的
    
    mode: "development",
    devServer: {
        port: 3000, // 指定开发服务器的端口号
        progress: true, // 显示开启本地服务器的进度
        contentBase: "./build", // 指定本地服务器默认打开的目录
        compress: true, // 是否对代码进行压缩
    },
});

4. 写在最后

如上述代码所示，使用 webpack-merge 包可以将之间的配置文件作为参数，结合最新的配置参数，形成一个新的配置文件。采用这种方式，我们就可以在项目中，将开发配置、生产配置和公有配置分离成不同的文件，方便我们管理项目，提高开发效率。