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 包可以将之间的配置文件作为参数，结合最新的配置参数，形成一个新的配置文件。采用这种方式，我们就可以在项目中，将开发配置、生产配置和公有配置分离成不同的文件，方便我们管理项目，提高开发效率。
网友评论