target

告知 webpack 为目标(target)指定一个环境
image.png

Devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。
image.png

  • 打包后的代码 - 将所有生成的代码视为一大块代码。你看不到相互分离的模块。
  • 生成后的代码 - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 生成的代码。示例：你会看到类似 var moduleWEBPACK_IMPORTED_MODULE_1 = webpack_require(42); moduleWEBPACK_IMPORTED_MODULE_1.a();，而不是 import {test} from “module”; test();。
  • 转换过的代码 - 每个模块相互分离，并用模块名称进行注释。可以看到 webpack 转换前、loader 转译后的代码。示例：你会看到类似 import {test} from “module”; var A = function(_test) { … }(test);，而不是 import {test} from “module”; class A extends test {}。
  • 原始源代码 - 每个模块相互分离，并用模块名称进行注释。你会看到转译之前的代码，正如编写它时。这取决于 loader 支持。
  • 无源代码内容 - source map 中不包含源代码内容。浏览器通常会尝试从 web 服务器或文件系统加载源代码。你必须确保正确设置 output.devtoolModuleFilenameTemplate，以匹配源代码的 url。

  • （仅限行） - source map 被简化为每行一个映射。这通常意味着每个语句只有一个映射（假设你使用这种方式）。这会妨碍你在语句级别上调试执行，也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后，映射关系是不可能实现的，因为压缩工具通常只会输出一行。

    开发环境 [ 建议使用eval-source-map ]

  • eval - 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。

  • eval-source-map - 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
  • cheap-eval-source-map - 类似 eval-source-map，每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map，因为它没有生成列映射(column mapping)，只是映射行数。它会忽略源自 loader 的 source map，并且仅显示转译后的代码，就像 eval devtool。
  • cheap-module-eval-source-map - 类似 cheap-eval-source-map，并且，在这种情况下，源自 loader 的 source map 会得到更好的处理结果。然而，loader source map 会被简化为每行一个映射(mapping)。

eval

image.png
image.png
image.png

eval-source-map

image.png
image.png
image.png

cheap-eval-source-map

image.png
image.png
image.png

cheap-module-eval-source-map

image.png
image.png
image.png

生产环境

  • (none)（省略 devtool 选项） - 不生成 source map。这是一个不错的选择。
  • source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。
  • hidden-source-map - 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。
  • nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

none

image.png

source-map

image.png

hidden-source-map

image.png

nosources-source-map

image.png

特定场景

  • inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中。
  • cheap-source-map - 没有列映射(column mapping)的 source map，忽略 loader source map。
  • inline-cheap-source-map - 类似 cheap-source-map，但是 source map 转换为 DataUrl 后添加到 bundle 中。
  • cheap-module-source-map - 没有列映射(column mapping)的 source map，将 loader source map 简化为每行一个映射(mapping)。
  • inline-cheap-module-source-map - 类似 cheap-module-source-map，但是 source mapp 转换为 DataUrl 添加到 bundle 中。

Watch 和 WatchOptions

前面介绍过 Webpack 的监听模式，它支持监听文件更新，在文件发生变化时重新编译。在使用 Webpack 时监听模式默认是关闭。在使用 DevServer 时，监听模式默认是开启的。

  1.    watch: true,
  2.    watchOptions: {
  3.     // 不监听的文件或文件夹，支持正则匹配
  4.     // 默认为空
  5.     ignored: /node_modules/,
  6.     // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
  7.     // 默认为 300ms  
  8.     aggregateTimeout: 3000,
  9.     // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
  10.     // 默认每秒轮询1000次
  11.     poll: 1000
  12.   }

ResolveLoader

http://site.damobing.com/webpack/2%E9%85%8D%E7%BD%AE/2-7%E5%85%B6%E5%AE%83%E9%85%8D%E7%BD%AE%E9%A1%B9.html ResolveLoader 用来告诉 Webpack 如何去寻找 Loader，因为在使用 Loader 时是通过其包名称去引用的， Webpack 需要根据配置的 Loader 包名去找到 Loader 的实际代码，以调用 Loader 去处理源文件。

ResolveLoader 的默认配置如下： 

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

该配置项常用于加载本地的 Loader。