配置

webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它。

下面指定了所有可用的配置选项。

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

选项

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

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

webpack.config.js

  1. const path = require('path');
  3. module.exports = {
  4.   mode: "production", // "production" | "development" | "none"  mode: "production", // enable many optimizations for production builds
  5.   mode: "development", // enabled useful tools for development
  6.   mode: "none", // no defaults
  7.   // Chosen mode tells webpack to use its built-in optimizations accordingly.
  8.   entry: "./app/entry", // string | object | array  entry: ["./app/entry1", "./app/entry2"],
  9.   entry: {
  10.     a: "./app/entry-a",
  11.     b: ["./app/entry-b1", "./app/entry-b2"]
  12.   },
  13.   // 默认为 './src'
  14.   // 这里应用程序开始执行
  15.   // webpack 开始打包
  16.   output: {
  17.     // webpack 如何输出结果的相关选项
  18.     path: path.resolve(__dirname, "dist"), // string
  19.     // 所有输出文件的目标路径
  20.     // 必须是绝对路径（使用 Node.js 的 path 模块）
  21.     filename: "bundle.js", // string    filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
  22.     filename: "[chunkhash].js", // 用于长效缓存
  23.     // 「入口分块(entry chunk)」的文件名模板
  24.     publicPath: "/assets/", // string    publicPath: "",
  25.     publicPath: "https://cdn.example.com/",
  26.     // 输出解析文件的目录，url 相对于 HTML 页面
  27.     library: "MyLibrary", // string,
  28.     // 导出库(exported library)的名称
  29.     libraryTarget: "umd", // 通用模块定义        libraryTarget: "umd2", // 通用模块定义
  30.         libraryTarget: "commonjs2", // exported with module.exports
  31.         libraryTarget: "commonjs", // 作为 exports 的属性导出
  32.         libraryTarget: "amd", // 使用 AMD 定义方法来定义
  33.         libraryTarget: "this", // 在 this 上设置属性
  34.         libraryTarget: "var", // 变量定义于根作用域下
  35.         libraryTarget: "assign", // 盲分配(blind assignment)
  36.         libraryTarget: "window", // 在 window 对象上设置属性
  37.         libraryTarget: "global", // property set to global object
  38.         libraryTarget: "jsonp", // jsonp wrapper
  39.     // 导出库(exported library)的类型
  40.     /* 高级输出配置（点击显示） */    pathinfo: true, // boolean
  41.     // 在生成代码时，引入相关的模块、导出、请求等有帮助的路径信息。
  42.     chunkFilename: "[id].js",
  43.     chunkFilename: "[chunkhash].js", // 长效缓存(/guides/caching)
  44.     // 「附加分块(additional chunk)」的文件名模板
  45.     jsonpFunction: "myWebpackJsonp", // string
  46.     // 用于加载分块的 JSONP 函数名
  47.     sourceMapFilename: "[file].map", // string
  48.     sourceMapFilename: "sourcemaps/[file].map", // string
  49.     // 「source map 位置」的文件名模板
  50.     devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string
  51.     // 「devtool 中模块」的文件名模板
  52.     devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string
  53.     // 「devtool 中模块」的文件名模板（用于冲突）
  54.     umdNamedDefine: true, // boolean
  55.     // 在 UMD 库中使用命名的 AMD 模块
  56.     crossOriginLoading: "use-credentials", // 枚举
  57.     crossOriginLoading: "anonymous",
  58.     crossOriginLoading: false,
  59.     // 指定运行时如何发出跨域请求问题
  60.     /* 专家级输出配置（自行承担风险） */    devtoolLineToLine: {
  61.       test: /\.jsx$/
  62.     },
  63.     // 为这些模块使用 1:1 映射 SourceMaps（快速）
  64.     hotUpdateMainFilename: "[hash].hot-update.json", // string
  65.     // 「HMR 清单」的文件名模板
  66.     hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string
  67.     // 「HMR 分块」的文件名模板
  68.     sourcePrefix: "\t", // string
  69.     // 包内前置式模块资源具有更好可读性
  70.   },
  71.   module: {
  72.     // 关于模块配置
  73.     rules: [
  74.       // 模块规则（配置 loader、解析器等选项）
  75.       {
  76.         test: /\.jsx?$/,
  77.         include: [
  78.           path.resolve(__dirname, "app")
  79.         ],
  80.         exclude: [
  81.           path.resolve(__dirname, "app/demo-files")
  82.         ],
  83.         // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
  84.         // test 和 include 具有相同的作用，都是必须匹配选项
  85.         // exclude 是必不匹配选项（优先于 test 和 include）
  86.         // 最佳实践：
  87.         // - 只在 test 和 文件名匹配 中使用正则表达式
  88.         // - 在 include 和 exclude 中使用绝对路径数组
  89.         // - 尽量避免 exclude，更倾向于使用 include
  90.         issuer: { test, include, exclude },
  91.         // issuer 条件（导入源）
  92.         enforce: "pre",
  93.         enforce: "post",
  94.         // 标识应用这些规则，即使规则覆盖（高级选项）
  95.         loader: "babel-loader",
  96.         // 应该应用的 loader，它相对上下文解析
  97.         // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
  98.         // 查看 webpack 1 升级指南。
  99.         options: {
  100.           presets: ["es2015"]
  101.         },
  102.         // loader 的可选项
  103.       },
  104.       {
  105.         test: /\.html$/,
  106.         use: [
  107.           // 应用多个 loader 和选项
  108.           "htmllint-loader",
  109.           {
  110.             loader: "html-loader",
  111.             options: {
  112.               /* ... */
  113.             }
  114.           }
  115.         ]
  116.       },
  117.       { oneOf: [ /* rules */ ] },
  118.       // 只使用这些嵌套规则之一
  119.       { rules: [ /* rules */ ] },
  120.       // 使用所有这些嵌套规则（合并可用条件）
  121.       { resource: { and: [ /* 条件 */ ] } },
  122.       // 仅当所有条件都匹配时才匹配
  123.       { resource: { or: [ /* 条件 */ ] } },
  124.       { resource: [ /* 条件 */ ] },
  125.       // 任意条件匹配时匹配（默认为数组）
  126.       { resource: { not: /* 条件 */ } }
  127.       // 条件不匹配时匹配
  128.     ],
  129.     /* 高级模块配置（点击展示） */    noParse: [
  130.       /special-library\.js$/
  131.     ],
  132.     // 不解析这里的模块
  133.     unknownContextRequest: ".",
  134.     unknownContextRecursive: true,
  135.     unknownContextRegExp: /^\.\/.*$/,
  136.     unknownContextCritical: true,
  137.     exprContextRequest: ".",
  138.     exprContextRegExp: /^\.\/.*$/,
  139.     exprContextRecursive: true,
  140.     exprContextCritical: true,
  141.     wrappedContextRegExp: /.*/,
  142.     wrappedContextRecursive: true,
  143.     wrappedContextCritical: false,
  144.     // specifies default behavior for dynamic requests
  145.   },
  146.   resolve: {
  147.     // 解析模块请求的选项
  148.     // （不适用于对 loader 解析）
  149.     modules: [
  150.       "node_modules",
  151.       path.resolve(__dirname, "app")
  152.     ],
  153.     // 用于查找模块的目录
  154.     extensions: [".js", ".json", ".jsx", ".css"],
  155.     // 使用的扩展名
  156.     alias: {
  157.       // 模块别名列表
  158.       "module": "new-module",
  159.       // 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
  160.       "only-module$": "new-module",
  161.       // 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"
  162.       "module": path.resolve(__dirname, "app/third/module.js"),
  163.       // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
  164.       // 模块别名相对于当前上下文导入
  165.     },
  166.     /* 可供选择的别名语法（点击展示） */    alias: [
  167.       {
  168.         name: "module",
  169.         // 旧的请求
  170.         alias: "new-module",
  171.         // 新的请求
  172.         onlyModule: true
  173.         // 如果为 true，只有 "module" 是别名
  174.         // 如果为 false，"module/inner/path" 也是别名
  175.       }
  176.     ],
  177.     /* 高级解析选项（点击展示） */    symlinks: true,
  178.     // 遵循符号链接(symlinks)到新位置
  179.     descriptionFiles: ["package.json"],
  180.     // 从 package 描述中读取的文件
  181.     mainFields: ["main"],
  182.     // 从描述文件中读取的属性
  183.     // 当请求文件夹时
  184.     aliasFields: ["browser"],
  185.     // 从描述文件中读取的属性
  186.     // 以对此 package 的请求起别名
  187.     enforceExtension: false,
  188.     // 如果为 true，请求必不包括扩展名
  189.     // 如果为 false，请求可以包括扩展名
  190.     moduleExtensions: ["-module"],
  191.     enforceModuleExtension: false,
  192.     // 类似 extensions/enforceExtension，但是用模块名替换文件
  193.     unsafeCache: true,
  194.     unsafeCache: {},
  195.     // 为解析的请求启用缓存
  196.     // 这是不安全，因为文件夹结构可能会改动
  197.     // 但是性能改善是很大的
  198.     cachePredicate: (path, request) => true,
  199.     // predicate function which selects requests for caching
  200.     plugins: [
  201.       // ...
  202.     ]
  203.     // 应用于解析器的附加插件
  204.   },
  205.   performance: {
  206.     hints: "warning", // 枚举    hints: "error", // 性能提示中抛出错误
  207.     hints: false, // 关闭性能提示
  208.     maxAssetSize: 200000, // 整数类型（以字节为单位）
  209.     maxEntrypointSize: 400000, // 整数类型（以字节为单位）
  210.     assetFilter: function(assetFilename) {
  211.       // 提供资源文件名的断言函数
  212.       return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
  213.     }
  214.   },
  215.   devtool: "source-map", // enum  devtool: "inline-source-map", // 嵌入到源文件中
  216.   devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
  217.   devtool: "hidden-source-map", // SourceMap 不在源文件中引用
  218.   devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
  219.   devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
  220.   devtool: "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快。
  221.   // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  222.   // 牺牲了构建速度的 `source-map' 是最详细的。
  223.   context: __dirname, // string（绝对路径！）
  224.   // webpack 的主目录
  225.   // entry 和 module.rules.loader 选项
  226.   // 相对于此目录解析
  227.   target: "web", // 枚举  target: "webworker", // WebWorker
  228.   target: "node", // node.js 通过 require
  229.   target: "async-node", // Node.js 通过 fs 和 vm
  230.   target: "node-webkit", // nw.js
  231.   target: "electron-main", // electron，主进程(main process)
  232.   target: "electron-renderer", // electron，渲染进程(renderer process)
  233.   target: (compiler) => { /* ... */ }, // 自定义
  234.   // bundle 应该运行的环境
  235.   // 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)
  236.   externals: ["react", /^@angular\//],  externals: "react", // string（精确匹配）
  237.   externals: /^[a-z\-]+($|\/)/, // 正则
  238.   externals: { // 对象
  239.     angular: "this angular", // this["angular"]
  240.     react: { // UMD
  241.       commonjs: "react",
  242.       commonjs2: "react",
  243.       amd: "react",
  244.       root: "React"
  245.     }
  246.   },
  247.   externals: (request) => { /* ... */ return "commonjs " + request }
  248.   // 不要遵循/打包这些模块，而是在运行时从环境中请求他们
  249.   serve: { //object
  250.     port: 1337,
  251.     content: './dist',
  252.     // ...
  253.   },
  254.   // 为 webpack-serve 提供选项
  255.   stats: "errors-only",  stats: { //object
  256.     assets: true,
  257.     colors: true,
  258.     errors: true,
  259.     errorDetails: true,
  260.     hash: true,
  261.     // ...
  262.   },
  263.   // 精确控制要显示的 bundle 信息
  264.   devServer: {
  265.     proxy: { // proxy URLs to backend development server
  266.       '/api': 'http://localhost:3000'
  267.     },
  268.     contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
  269.     compress: true, // enable gzip compression
  270.     historyApiFallback: true, // true for index.html upon 404, object for multiple paths
  271.     hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
  272.     https: false, // true for self-signed, object for cert authority
  273.     noInfo: true, // only errors & warns on hot reload
  274.     // ...
  275.   },
  276.   plugins: [
  277.     // ...
  278.   ],
  279.   // 附加插件列表
  280.   /* 高级配置（点击展示） */  resolveLoader: { /* 等同于 resolve */ }
  281.   // 独立解析选项的 loader
  282.   parallelism: 1, // number
  283.   // 限制并行处理模块的数量
  284.   profile: true, // boolean
  285.   // 捕获时机信息
  286.   bail: true, //boolean
  287.   // 在第一个错误出错时抛出，而不是无视错误。
  288.   cache: false, // boolean
  289.   // 禁用/启用缓存
  290.   watch: true, // boolean
  291.   // 启用观察
  292.   watchOptions: {
  293.     aggregateTimeout: 1000, // in ms
  294.     // 将多个更改聚合到单个重构建(rebuild)
  295.     poll: true,
  296.     poll: 500, // 间隔单位 ms
  297.     // 启用轮询观察模式
  298.     // 必须用在不通知更改的文件系统中
  299.     // 即 nfs shares（译者注：Network FileSystem，最大的功能就是可以透過網路，讓不同的機器、不同的作業系統、可以彼此分享個別的檔案 ( share file )）
  300.   },
  301.   node: {
  302.     // Polyfills and mocks to run Node.js-
  303.     // environment code in non-Node environments.
  304.     console: false, // boolean | "mock"
  305.     global: true, // boolean | "mock"
  306.     process: true, // boolean
  307.     __filename: "mock", // boolean | "mock"
  308.     __dirname: "mock", // boolean | "mock"
  309.     Buffer: true, // boolean | "mock"
  310.     setImmediate: true // boolean | "mock" | "empty"
  311.   },
  312.   recordsPath: path.resolve(__dirname, "build/records.json"),
  313.   recordsInputPath: path.resolve(__dirname, "build/records.json"),
  314.   recordsOutputPath: path.resolve(__dirname, "build/records.json"),
  315.   // TODO
  316. }

Use custom configuration file

If for some reason you want to use custom configuration file depending on certain situations you can change this via command line by using the --config flag.

package.json

  1. "scripts": {
  2.   "build": "webpack --config prod.config.js"
  3. }

Configuration file generators

Want to rapidly generate webpack configuration file for your project requirements with just a few clicks away?

Generate Custom Webpack Configuration is an interactive portal you can play around by selecting custom webpack configuration options tailored for your frontend project. It automatically generates a minimal webpack configuration based on your selection of loaders/plugins, etc.

Visual tool for creating webpack configs is an online configuration tool for creating webpack configuration file where you can select any combination of features you need. It also generates a full example project based on your webpack configs.

贡献人员

bondz bondz byzyk byzyk dasarianudeep dasarianudeep grgur grgur jeremenichelli jeremenichelli kbariotis kbariotis kennetvu kennetvu mattce mattce skipjack skipjack sokra sokra sricc sricc sterlingvix sterlingvix terinjokes terinjokes