Target

target 配置项可以让 Webpack 根据不同运行构建出针对不同运行环境的代码。

target值 描述
web 针对浏览器 (默认)，所有代码都集中在一个文件里
node 针对 Node.js，使用 require 语句加载 Chunk 代码
async-node 针对 Node.js，异步加载 Chunk 代码
webworker 针对 WebWorker
electron-main 针对 Electron
主线程
electron-renderer 针对 Electron 渲染线程

Devtool

webpack是否配置Source Map文件

  1. module.export = {
  2.   devtool: 'source-map'
  3. }

Watch 和 WatchOptions

Webpack 的监听模式它支持监听文件更新，在文件发生变化时重新编译。
watchoptions是watch配置项只有开启了watch才能设置。

  1. module.export = {
  2.   // 只有在开启监听模式时，watchOptions 才有意义
  3.   // 默认为 false，也就是不开启
  4.   watch: true,
  5.   // 监听模式运行时的参数
  6.   // 在开启监听模式时，才有意义
  7.   watchOptions: {
  8.     // 不监听的文件或文件夹，支持正则匹配
  9.     // 默认为空
  10.     ignored: /node_modules/,
  11.     // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
  12.     // 默认为 300ms  
  13.     aggregateTimeout: 300,
  14.     // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
  15.     // 默认每隔1000毫秒询问一次
  16.     poll: 1000
  17.   }
  18. }

Externals

如果我们在代码中import导入了库，并且在html打包文件script中也引用了，导致webpack打包的时候会进行两次。

  1. module.export = {
  2.   externals: {
  3.     // 把导入语句里的 jquery 替换成运行环境里的全局变量 jQuery
  4.     jquery: 'jQuery'
  5.   }
  6. }

ResolveLoader

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

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