Question

webpack 是需要传入一个配置对象(configuration object)。取决于你如何使用 webpack，可以通过两种方式之一：终端或 Node.js。下面指定了所有可用的配置选项。

T> 刚接触 webpack？请查看我们提供的指南，从 webpack 一些核心概念开始学习吧！

T> 注意整个配置中我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。更多「POSIX 和 Windows」的相关信息请查看此章节。

选项

点击下面配置代码中每个选项的名称，跳转到详细的文档。还要注意，带有箭头的项目可以展开，以显示更多示例，在某些情况下可以看到高级配置。

webpack.config.js

const path = require('path');

module.exports = {
  <details><summary>[mode](/concepts/mode): "production", // "production" | "development" | "none"</summary>
  [mode](/concepts/mode): "production", // enable many optimizations for production builds
  [mode](/concepts/mode): "development", // enabled useful tools for development
  [mode](/concepts/mode): "none", // no defaults
  </details>
  // Chosen mode tells webpack to use its built-in optimizations accordingly.

  <details><summary>[entry](/configuration/entry-context#entry): "./app/entry", // string | object | array</summary>
  [entry](/configuration/entry-context#entry): ["./app/entry1", "./app/entry2"],
  [entry](/configuration/entry-context#entry): {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },
  </details>
  // 这里应用程序开始执行
  // webpack 开始打包

  [output](/configuration/output): {
    // webpack 如何输出结果的相关选项

    [path](/configuration/output#output-path): path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径
    // 必须是绝对路径（使用 Node.js 的 path 模块）

    <details><summary>[filename](/configuration/output#output-filename): "bundle.js", // string</summary>
    [filename](/configuration/output#output-filename): "[name].js", // 用于多个入口点(entry point)（出口点？）
    [filename](/configuration/output#output-filename): "[chunkhash].js", // 用于[长效缓存](/guides/cache)
    </details>
    // 「入口分块(entry chunk)」的文件名模板（出口分块？）

    <details><summary>[publicPath](/configuration/output#output-publicpath): "/assets/", // string</summary>
    [publicPath](/configuration/output#output-publicpath): "",
    [publicPath](/configuration/output#output-publicpath): "https://cdn.example.com/",
    </details>
    // 输出解析文件的目录，url 相对于 HTML 页面

    [library](/configuration/output#output-library): "MyLibrary", // string,
    // 导出库(exported library)的名称

    <details><summary>[libraryTarget](/configuration/output#output-librarytarget): "umd", // 通用模块定义</summary>
        [libraryTarget](/configuration/output#output-librarytarget): "umd2", // 通用模块定义
        [libraryTarget](/configuration/output#output-librarytarget): "commonjs2", // exported with module.exports
        [libraryTarget](/configuration/output#output-librarytarget): "commonjs-module", // 使用 module.exports 导出
        [libraryTarget](/configuration/output#output-librarytarget): "commonjs", // 作为 exports 的属性导出
        [libraryTarget](/configuration/output#output-librarytarget): "amd", // 使用 AMD 定义方法来定义
        [libraryTarget](/configuration/output#output-librarytarget): "this", // 在 this 上设置属性
        [libraryTarget](/configuration/output#output-librarytarget): "var", // 变量定义于根作用域下
        [libraryTarget](/configuration/output#output-librarytarget): "assign", // 盲分配(blind assignment)
        [libraryTarget](/configuration/output#output-librarytarget): "window", // 在 window 对象上设置属性
        [libraryTarget](/configuration/output#output-librarytarget): "global", // property set to global object
        [libraryTarget](/configuration/output#output-librarytarget): "jsonp", // jsonp wrapper
    </details>
    // 导出库(exported library)的类型

    <details><summary>/* 高级输出配置（点击显示） */</summary>

    [pathinfo](/configuration/output#output-pathinfo): true, // boolean
    // 在生成代码时，引入相关的模块、导出、请求等有帮助的路径信息。

    [chunkFilename](/configuration/output#output-chunkfilename): "[id].js",
    [chunkFilename](/configuration/output#output-chunkfilename): "[chunkhash].js", // 长效缓存(/guides/caching)
    // 「附加分块(additional chunk)」的文件名模板

    [jsonpFunction](/configuration/output#output-jsonpfunction): "myWebpackJsonp", // string
    // 用于加载分块的 JSONP 函数名

    [sourceMapFilename](/configuration/output#output-sourcemapfilename): "[file].map", // string
    [sourceMapFilename](/configuration/output#output-sourcemapfilename): "sourcemaps/[file].map", // string
    // 「source map 位置」的文件名模板

    [devtoolModuleFilenameTemplate](/configuration/output#output-devtoolmodulefilenametemplate): "webpack:///[resource-path]", // string
    // 「devtool 中模块」的文件名模板

    [devtoolFallbackModuleFilenameTemplate](/configuration/output#output-devtoolfallbackmodulefilenametemplate): "webpack:///[resource-path]?[hash]", // string
    // 「devtool 中模块」的文件名模板（用于冲突）

    [umdNamedDefine](/configuration/output#output-umdnameddefine): true, // boolean
    // 在 UMD 库中使用命名的 AMD 模块

    [crossOriginLoading](/configuration/output#output-crossoriginloading): "use-credentials", // 枚举
    [crossOriginLoading](/configuration/output#output-crossoriginloading): "anonymous",
    [crossOriginLoading](/configuration/output#output-crossoriginloading): false,
    // 指定运行时如何发出跨域请求问题

    <details><summary>/* 专家级输出配置（自行承担风险） */</summary>

    [devtoolLineToLine](/configuration/output#output-devtoollinetoline): {
      test: /\.jsx$/
    },
    // 为这些模块使用 1:1 映射 SourceMaps（快速）

    [hotUpdateMainFilename](/configuration/output#output-hotupdatemainfilename): "[hash].hot-update.json", // string
    // 「HMR 清单」的文件名模板

    [hotUpdateChunkFilename](/configuration/output#output-hotupdatechunkfilename): "[id].[hash].hot-update.js", // string
    // 「HMR 分块」的文件名模板

    [sourcePrefix](/configuration/output#output-sourceprefix): "\t", // string
    // 包内前置式模块资源具有更好可读性
    </details>
    </details>
  },

  [module](/configuration/module): {
    // 关于模块配置

    [rules](/configuration/module#module-rules): [
      // 模块规则（配置 loader、解析器等选项）

      {
        [test](/configuration/module#rule-test): /\.jsx?$/,
        [include](/configuration/module#rule-include): [
          path.resolve(__dirname, "app")
        ],
        [exclude](/configuration/module#rule-exclude): [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
        // test 和 include 具有相同的作用，都是必须匹配选项
        // exclude 是必不匹配选项（优先于 test 和 include）
        // 最佳实践：
        // - 只在 test 和 文件名匹配 中使用正则表达式
        // - 在 include 和 exclude 中使用绝对路径数组
        // - 尽量避免 exclude，更倾向于使用 include

        [issuer](/configuration/module#rule-issuer): { test, include, exclude },
        // issuer 条件（导入源）

        [enforce](/configuration/module#rule-enforce): "pre",
        [enforce](/configuration/module#rule-enforce): "post",
        // 标识应用这些规则，即使规则覆盖（高级选项）

        [loader](/configuration/module#rule-loader): "babel-loader",
        // 应该应用的 loader，它相对上下文解析
        // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
        // 查看 [webpack 1 升级指南](/guides/migrating)。

        [options](/configuration/module#rule-options-rule-query): {
          presets: ["es2015"]
        },
        // loader 的可选项
      },

      {
        [test](/configuration/module#rule-test): /\.html$/,
        [test](/configuration/module#rule-test): "\.html$"

        [use](/configuration/module#rule-use): [
          // 应用多个 loader 和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },

      { [oneOf](/configuration/module#rule-oneof): [ /* rules */ ] },
      // 只使用这些嵌套规则之一

      { [rules](/configuration/module#rule-rules): [ /* rules */ ] },
      // 使用所有这些嵌套规则（合并可用条件）

      { [resource](/configuration/module#rule-resource): { [and](/configuration/module#condition): [ /* 条件 */ ] } },
      // 仅当所有条件都匹配时才匹配

      { [resource](/configuration/module#rule-resource): { [or](/configuration/module#condition): [ /* 条件 */ ] } },
      { [resource](/configuration/module#rule-resource): [ /* 条件 */ ] },
      // 任意条件匹配时匹配（默认为数组）

      { [resource](/configuration/module#rule-resource): { [not](/configuration/module#condition): /* 条件 */ } }
      // 条件不匹配时匹配
    ],

    <details><summary>/* 高级模块配置（点击展示） */</summary>

    [noParse](/configuration/module#module-noparse): [
      /special-library\.js$/
    ],
    // 不解析这里的模块

    unknownContextRequest: ".",
    unknownContextRecursive: true,
    unknownContextRegExp: /^\.\/.*$/,
    unknownContextCritical: true,
    exprContextRequest: ".",
    exprContextRegExp: /^\.\/.*$/,
    exprContextRecursive: true,
    exprContextCritical: true,
    wrappedContextRegExp: /.*/,
    wrappedContextRecursive: true,
    wrappedContextCritical: false,
    // specifies default behavior for dynamic requests
    </details>
  },

  [resolve](/configuration/resolve): {
    // 解析模块请求的选项
    // （不适用于对 loader 解析）

    [modules](/configuration/resolve#resolve-modules): [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // 用于查找模块的目录

    [extensions](/configuration/resolve#resolve-extensions): [".js", ".json", ".jsx", ".css"],
    // 使用的扩展名

    [alias](/configuration/resolve#resolve-alias): {
      // 模块别名列表

      "module": "new-module",
      // 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      // 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js"),
      // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
      // 模块别名相对于当前上下文导入
    },
    <details><summary>/* 可供选择的别名语法（点击展示） */</summary>
    [alias](/configuration/resolve#resolve-alias): [
      {
        name: "module",
        // 旧的请求

        alias: "new-module",
        // 新的请求

        onlyModule: true
        // 如果为 true，只有 "module" 是别名
        // 如果为 false，"module/inner/path" 也是别名
      }
    ],
    </details>

    <details><summary>/* 高级解析选项（点击展示） */</summary>

    [symlinks](/configuration/resolve#resolve-symlinks): true,
    // 遵循符号链接(symlinks)到新位置

    [descriptionFiles](/configuration/resolve#resolve-descriptionfiles): ["package.json"],
    // 从 package 描述中读取的文件

    [mainFields](/configuration/resolve#resolve-mainfields): ["main"],
    // 从描述文件中读取的属性
    // 当请求文件夹时

    [aliasFields](/configuration/resolve#resolve-aliasfields): ["browser"],
    // 从描述文件中读取的属性
    // 以对此 package 的请求起别名

    [enforceExtension](/configuration/resolve#resolve-enforceextension): false,
    // 如果为 true，请求必不包括扩展名
    // 如果为 false，请求可以包括扩展名

    [moduleExtensions](/configuration/resolve#resolveloader-moduleextensions): ["-module"],
    [enforceModuleExtension](/configuration/resolve#resolve-enforcemoduleextension): false,
    // 类似 extensions/enforceExtension，但是用模块名替换文件

    [unsafeCache](/configuration/resolve#resolve-unsafecache): true,
    [unsafeCache](/configuration/resolve#resolve-unsafecache): {},
    // 为解析的请求启用缓存
    // 这是不安全，因为文件夹结构可能会改动
    // 但是性能改善是很大的

    [cachePredicate](/configuration/resolve#resolve-cachepredicate): (path, request) => true,
    // predicate function which selects requests for caching

    [plugins](/configuration/resolve#resolve-plugins): [
      // ...
    ]
    // 应用于解析器的附加插件
    </details>
  },

  [performance](/configuration/performance): {
    <details><summary>[hints](/configuration/performance#performance-hints): "warning", // 枚举 </summary>
    [hints](/configuration/performance#performance-hints): "error", // 性能提示中抛出错误
    [hints](/configuration/performance#performance-hints): false, // 关闭性能提示
    </details>
    [maxAssetSize](/configuration/performance#performance-maxassetsize): 200000, // 整数类型（以字节为单位）
    [maxEntrypointSize](/configuration/performance#performance-maxentrypointsize): 400000, // 整数类型（以字节为单位）
    [assetFilter](/configuration/performance#performance-assetfilter): function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  <details><summary>[devtool](/configuration/devtool): "source-map", // enum </summary>
  [devtool](/configuration/devtool): "inline-source-map", // 嵌入到源文件中
  [devtool](/configuration/devtool): "eval-source-map", // 将 SourceMap 嵌入到每个模块中
  [devtool](/configuration/devtool): "hidden-source-map", // SourceMap 不在源文件中引用
  [devtool](/configuration/devtool): "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
  [devtool](/configuration/devtool): "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
  [devtool](/configuration/devtool): "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快。
  </details>
  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  // 牺牲了构建速度的 `source-map' 是最详细的。

  [context](/configuration/entry-context#context): __dirname, // string（绝对路径！）
  // webpack 的主目录
  // [entry](/configuration/entry-context) 和 [module.rules.loader](/configuration/module#rule-loader) 选项
  // 相对于此目录解析

  <details><summary>[target](/configuration/target): "web", // 枚举</summary>
  [target](/configuration/target): "webworker", // WebWorker
  [target](/configuration/target): "node", // node.js 通过 require
  [target](/configuration/target): "async-node", // Node.js 通过 fs and vm
  [target](/configuration/target): "node-webkit", // nw.js
  [target](/configuration/target): "electron-main", // electron，主进程(main process)
  [target](/configuration/target): "electron-renderer", // electron，渲染进程(renderer process)
  [target](/configuration/target): (compiler) => { /* ... */ }, // 自定义
  </details>
  // 包(bundle)应该运行的环境
  // 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)

  <details><summary>[externals](/configuration/externals): ["react", /^@angular\//],</summary>
  [externals](/configuration/externals): "react", // string（精确匹配）
  [externals](/configuration/externals): /^[a-z\-]+($|\/)/, // 正则
  [externals](/configuration/externals): { // 对象
    angular: "this angular", // this["angular"]
    react: { // UMD
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
      root: "React"
    }
  },
  [externals](/configuration/externals): (request) => { /* ... */ return "commonjs " + request }
  </details>
  // 不要遵循/打包这些模块，而是在运行时从环境中请求他们

  <details><summary>[stats](/configuration/stats): "errors-only",</summary>
  [stats](/configuration/stats): { //object
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
    // ...
  },
  </details>
  // 精确控制要显示的 bundle 信息

  [devServer](/configuration/dev-server): {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },

  [plugins](plugins): [
    // ...
  ],
  // 附加插件列表


  <details><summary>/* 高级配置（点击展示） */</summary>

  [resolveLoader](/configuration/resolve#resolveloader): { /* 等同于 resolve */ }
  // 独立解析选项的 loader

  [parallelism](other-options#parallelism): 1, // number
  // 限制并行处理模块的数量

  [profile](other-options#profile): true, // boolean
  // 捕获时机信息

  [bail](other-options#bail): true, //boolean
  // 在第一个错误出错时抛出，而不是无视错误。

  [cache](other-options#cache): false, // boolean
  // 禁用/启用缓存

  [watch](watch#watch): true, // boolean
  // 启用观察

  [watchOptions](watch#watchoptions): {
    [aggregateTimeout](watch#watchoptions-aggregatetimeout): 1000, // in ms
    // 将多个更改聚合到单个重构建(rebuild)

    [poll](watch#watchoptions-poll): true,
    [poll](watch#watchoptions-poll): 500, // 间隔单位 ms
    // 启用轮询观察模式
    // 必须用在不通知更改的文件系统中
    // 即 nfs shares（译者注：[Network FileSystem](http://linux.vbird.org/linux_server/0330nfs/0330nfs.php)，最大的功能就是可以透過網路，讓不同的機器、不同的作業系統、可以彼此分享個別的檔案 ( share file )）
  },

  [node](node): {
    // Polyfills and mocks to run Node.js-
    // environment code in non-Node environments.

    [console](node#node-console): false, // boolean | "mock"
    [global](node#node-global): true, // boolean | "mock"
    [process](node#node-process): true, // boolean
    [__filename](node#node-__filename): "mock", // boolean | "mock"
    [__dirname](node#node-__dirname): "mock", // boolean | "mock"
    [Buffer](node#node-buffer): true, // boolean | "mock"
    [setImmediate](node#node-setimmediate): true // boolean | "mock" | "empty"
  },

  [recordsPath](other-options#recordspath): path.resolve(__dirname, "build/records.json"),
  [recordsInputPath](other-options#recordsinputpath): path.resolve(__dirname, "build/records.json"),
  [recordsOutputPath](other-options#recordsoutputpath): path.resolve(__dirname, "build/records.json"),
  // TODO

  </details>
}