深入浅出webpack学习(9)--其他配置结构

除了Entry,Output,Module,Plugins这些配置外，webpack还提供了一些零散的配置项，接下来介绍它们中常用的部分。

1. Target

JavaScript的应用场景越来越多，从浏览器到Node.js，这些运行在不同环境的JavaScript代码存在一些差异。target配置项可以让webpack构建出针对不同运行环境的代码。target可以是以下之一：

1. web: 针对浏览器(默认)，所有代码都集中在一个文件里
2. node：针对node，使用require语句加载chunk代码
3. async-node: 针对node， 异步加载Chunk代码
4. webworker：针对webworker
5. electron-main：针对Electron主线程
6. electron-renderer：针对electron渲染线程

例如设置target:node的时候，源代码中导入nodejs原生模块的语句require('fs')将会保留，fs模块的内容不会打包进chunk里。

2. Devtool

devtool配置webpack如何生成Source Map， 默认值是false，即不生成Source Map， 想为构建出的代码生成Source Map以方便调试，可以这样配置：

module.exports = {
    devtool: 'scource-map'
}

3. watch和watchOptions

前面介绍过webpack的监听模式，它支持监听文件更新，在文件发生变化时重新编译。在使用webpack时监听模式默认是关闭的，想打开需要如下配置：

module.exports = {
    watch: true
}

在使用DevServer时，监听模式默认是开启的。
除此之外，webpack还提供了watchOptions配置项去更灵活的控制监听模式：

module.export = {
    //只有开启监听模式的时候，watchOptions才有意义
    watch: true,
    //监听模式运行时参数
    watchOptions: {
        //不监听的文件或文件夹，支持正则匹配
        //默认为空
        ignored: /node_modules/,
        //监听到变化后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
        //默认为300ms
        aggregateTimeout: 300,
        //判断文件是否发生变化是通过不停的询问系统指定文件有没有变化实现的
        //默认每秒问1000次
        poll: 1000
    }
}

4. Externals

Externals用来告诉webpack要构建的代码中使用了哪些不用被打包的模块，也就是说这些模板是外部环境提供的，webpack在打包的时候可以忽略它们。

有些JavaScript运行环境可能内置了一些全局变量或者模块，例如：

<script src="path/to/jquery.js"></script>

引入jquery后，全局变量jquery就会被注入到网页的JavaScript运行环境。

如果想在使用模块化的源代码里导入和使用jquery，可能需要这样：

import $ from 'jquery';

构建后会发现输出的Chunk中包含jquery库的内容，这导致了jquery库出现了两次，浪费了加载流量，我们做到的最好是不要在chunk里包含jquery。

Externals配置项就是为了解决这个问题。

通过externals可以告诉webpack JavaScript运行环境已经内置了哪些全局变量，针对这些全局变量不用打包进代码而是直接使用全局变量。要解决以上问题， 可以这样配置：

module.export = {
    externals: {
        //把导入语句里的jquery替换成运行环境里的jQuery
        jquery: 'jQuery'
    }
}

5. ResolveLoader

ResolveLoader告诉webpack如何去寻找loader。因为在使用loader时是通过其包名称去引用的，webpack需要根据配置的loader包名去找到loader的实际代码，以调用loader去处理源文件。

module.exports = {
  resolveLoader:{
    // 去哪个目录下寻找 Loader
    modules: ['node_modules'],
    // 入口文件的后缀
    extensions: ['.js', '.json'],
    // 指明入口文件位置的字段
    mainFields: ['loader', 'main']
  }
}

该配置常用加载本地的loader。