webpack4配置总结(二)

发表于 | 分类于 ，

上一篇整理了构建webpack项目的前置准备。根据这些准备，安装依赖，建好目录跟文件，就可以考虑写webpack配置了。

webpack配置的结构

首先，由于要分测试环境跟生产环境，所以webpack配置需要区分开测试跟生产环境的打包配置。但总是有一部分配置是相同的，所以把相同的配置整理在base配置文件中，然后对测试跟生产环境单独建配置文件。这里就需要用到webpack-merge插件。

webpack-merge

webpack-merge插件可以把array合并起来，也可以把多个对象进行合并。这种合并是有深度的，即会对数组的每个元素，对对象的每个属性进行深度合并。合并的原则是遇到数组有相同的元素会保留，遇到对象属性不同会保留后者，遇到函数会先执行函数得到结果再合并。另外会有包括webpack配置中某些值才参数的，会用后者覆盖。

所以webpack-merge非常适合适用于合并webpack配置。我们可以先在base文件中配置一份基础配置内容，然后再引入到测试环境跟生产环境的配置文件中，使用webpack-merge将其合并。也可以考虑把测试环境跟生产环境的配置引入到base文件中，根据环境变量不同来合并配置。

配置方案

这里选择的合并配置方案是把测试环境跟生产环境的配置引入到base文件中，根据环境变量不同来合并配置。这样做法可以在写script命令时把所有打包都指向base配置文件，只需要通过环境变量来区分。当然这个选择因人而异，把base配置引入到测试跟生产环境配置文件中也可以必须要在script命令上写明环境变量。

webpack基础配置

由于确定了配置方案，那么在base文件中，就需要区分不同的打包环境。区分的变量问isDev。

1
let isDev = env.development;

env.development是通过script命令传入的环境变量，可以用来区分打包环境。这个变量将影响我们在一些相同的配置属性上根据不同打包环境做不同的处理。

webpack配置结构

这里先简单的整理一下webpack配置结构。这里介绍的配置结构不是完整的，最好是看webpack官方文档的介绍比较好。

在webpack官网上，官方重点列举了四个核心概念，分别是前面说到的entry，output，还有loader跟plugins。而且base文件中主要也是这四个部分的配置，所以我也会按这四个方面进行整理说明。

entry

entry是用来配置打包入口文件的配置属性。这里可以使用数组或者对象。使用数组说明打包入口有多于一个，这种情况比较适合多页面入口或者打包一个单页面加vendor文件。而使用对象则一般为打包入口只有一个，这种情况比较多为单页面应用。每个入口文件可以配置入口命名，入口路径，前者是用于标识入口，后者是用于执行入口文件的位置。

这里只配置一个入口文件：

1
2
3
4
5
{
  entry: {
    main: resolve('../src/main.js')
  },
}

output

output是用来配置打包的出口的配置属性。这里只能配置一个输出配置，也即只能使用对象。对象中可以有以下属性：

filename: 这个属性是配置打包后文件的命名。可以是String类型，也可以是带动态生成的命名写法(如[name],[chunk],[hash]等这类写法将会在打包后命名文件名是被替换成指定的文件名，chunk值及hash戳)。

chunkFilename: 这个属性是在针对非入口文件，但需要单独打包的文件的文件命名。只要是针对使用require.ensure和import异步加载模块打包后的文件命名。

path: 这个属性是配置打包后文件保存的目录路径。一般我们会指定在根目录的dist目录下。

publicPath: 这个属性是配置最终文件的相对路径的前缀。因为我们一般打包后可以考虑将打包后的文件放到CDN上，在引用时需要要带上相应的CDN路径。配置这一项属性将可以让打包后的文件在引用时自动加上这个前缀。

1
2
3
4
5
6
7
8
{
  output: {
    filename: isDev ? '[name].js' : '[name].js?v=[chunkhash]',
    chunkFilename: isDev ? '[chunkhash].js' : '[id]-chunk.js?v=[chunkhash]',
    path: resolve('../dist'),
    publicPath: '/'
  },
}

loader

loader是webpack打包中非常重要的一项，而是webpack之所以能实现项目打包的核心部分配置。loader就是打包插件，我们使用一系列打包插件，对项目相应的源代码进行转换，它可以处理项目中通过各种方式引入的JavaScript代码，css代码，文件类型文件等等，可以转译es6，TypeScript，scss等等。

配置loader也不难。一般loader需要先安装，然后在webpack配置中module属性里配置，webpack提供了rules这个属性用于配置。因为常见我们需要对多种不同的代码模块进行打包编译转换，所以rules这个属性需要使用一个数组来配置；

1
2
3
4
5
6
7
8
9
10
{
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  }
}

数组的每一项都是一个对象，都会有基础的两种属性：test是用来匹配对应的模块，一般会匹配一个个文件名（因为我们理解的模块一般是一个文件为一个模块）。匹配文件名可以是一个String类型，或者一个正则等。use是用来指定打包编译转换的loader。如果只使用一个loader，则可以只写loader的名字，如果需要使用多个loader，则需要使用一个数组来列举loader，而数组的每个元素可以是一个String类型，可以是一个JSON格式（有些loader支持配置属性）。数组中loader的执行顺序是从右往左。

这里就先不详细整理一些loader的用法，后面单独整理。

plugins

plugins是用来配置webpack打包过程中使用的插件列表。这些插件可以让你自定义webpack打包过程，比如webpack.DefinePlugin插件可以让你在打包后的代码项目全局上定义一些常量；vue-loader内置了一个插件，是用于配置vue-loader打包编译的。

其他

其他配置项如resolve,devServer,mode和optimization等会在之后的篇章中做说明。

结尾

下一篇将会详细列举一些loader跟plugin的介绍。