Webpack 中文文档

第一部分:概念

概念

webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。它有着难以置信的配置，然而，我们认为你必须在开始前先了解四个核心概念！

作为您的 webpack 学习旅程的一部分，我们写这篇文档目的在于向你传递这些概念的高度概述，同时仍然提供特定概念的相关用例。

入口(Entry)

webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。

在 webpack 中，我们使用 webpack 配置对象(webpack configuration object) 中的 entry 属性来定义入口。

接下来我们看一个最简单的例子：

webpack.config.js

|

module.exports = {

entry: './path/to/my/entry/file.js'

};

|

这里有多种方式声明应用程序所需的特定 entry 属性。

了解更多！

出口(Output)

将所有的资源(assets)归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。

webpack.config.js

|

var path = require(``'path'``);

module.exports = {

entry: './path/to/my/entry/file.js'``,

output: {

path: path.resolve(__dirname, 'dist'``),

filename: 'my-first-webpack.bundle.js'

}

};

|

在上面例子中，我们正在通过 output.filename 和 output.path 属性来描述 webpack bundle 的名称，以及我们想要生成(emit)在哪里。

你可能看到项目生成(emitted 或 emit)贯穿我们整个文档和插件 API。它是“生产(produced) 或 排放(discharged)”的特殊术语。

output 属性还有更多可配置的特性，但让我们花一些时间先了解一些 output 属性的最常见的用例。

了解更多！

加载器(Loader)

webpack 的目标是，让 webpack 聚焦于项目中的所有资源(asset)，而浏览器不需要关注考虑这些（这并不意味着资源(asset)都必须打包在一起）。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。而且 webpack 只理解 JavaScript。

webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中。

在更高层面，webpack 的配置有两个目标。

1、识别出(identify)应该被对应的 loader 进行转换(transform)的那些文件
2、由于进行过文件转换，所以能够将被转换的文件添加到依赖图表（并且最终添加到 bundle 中）(use 属性)
webpack.config.js

|

var path = require(``'path'``);

const config = {

entry: './path/to/my/entry/file.js'``,

output: {

path: path.resolve(__dirname, 'dist'``),

filename: 'my-first-webpack.bundle.js'

},

module: {

rules: [

{test: /\.(js|jsx)$/, use: 'babel-loader'``}

]

}

};

module.exports = config;

|

以上配置中，我们对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这可以告诉 webpack compiler 如下：

“嘿，webpack compiler，当你碰到「在 require()/import 语句中被解析为 ‘.js’ 或 ‘.jsx’ 的路径」时，在你把它们添加并打包之前，要先使用 babel-loader 去转换”。

重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。在定义错时 webpack 会提出严重的警告。

我们还有尚未提到的 loader，可以设定更多特定属性。

了解更多！

插件(Plugins)

由于 loader 仅在每个文件的基础上执行转换，而 插件(plugins) 最常用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能（查看更多）。webpack 的插件系统极其强大和可定制化。

由于你可以在一个配置多次使用插件用于不同的目的 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。由于需要在一个配置中，多次使用一个插件，来针对不同的目的，因此你需要使用 new 来创建插件的实例，并且通过实例来调用插件。

webpack.config.js

|

const HtmlWebpackPlugin = require(``'html-webpack-plugin'``); //installed via npm

const webpack = require(``'webpack'``); //to access built-in plugins

const path = require(``'path'``);

const config = {

entry: './path/to/my/entry/file.js'``,

output: {

path: path.resolve(__dirname, 'dist'``),

filename: 'my-first-webpack.bundle.js'

},

module: {

rules: [

{test: /\.(js|jsx)$/, use: 'babel-loader'``}

]

},

plugins: [

new webpack.optimize.UglifyJsPlugin(),

new HtmlWebpackPlugin({template: './src/index.html'``})

]

};

module.exports = config;

|

webpack 提供许多开箱可用的插件！查阅我们的插件列表展示更多信息。

在 webpack 配置中使用插件是简单直接的，然而还是有很多用例值得我们深入讨论。

了解更多！
Webpack 2.2 中文文档

第一部分:概念

概念

webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。它有着难以置信的配置，然而，我们认为你必须在开始前先了解四个核心概念！

作为您的 webpack 学习旅程的一部分，我们写这篇文档目的在于向你传递这些概念的高度概述，同时仍然提供特定概念的相关用例。

入口(Entry)

webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。

在 webpack 中，我们使用 webpack 配置对象(webpack configuration object) 中的 entry 属性来定义入口。

接下来我们看一个最简单的例子：

webpack.config.js

|

module.exports = {

entry: './path/to/my/entry/file.js'

};

|

这里有多种方式声明应用程序所需的特定 entry 属性。

了解更多！

出口(Output)

将所有的资源(assets)归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。

webpack.config.js

|

var path = require(``'path'``);

module.exports = {

entry: './path/to/my/entry/file.js'``,

output: {

path: path.resolve(__dirname, 'dist'``),

filename: 'my-first-webpack.bundle.js'

}

};

|

在上面例子中，我们正在通过 output.filename 和 output.path 属性来描述 webpack bundle 的名称，以及我们想要生成(emit)在哪里。

你可能看到项目生成(emitted 或 emit)贯穿我们整个文档和插件 API。它是“生产(produced) 或 排放(discharged)”的特殊术语。

output 属性还有更多可配置的特性，但让我们花一些时间先了解一些 output 属性的最常见的用例。

了解更多！

加载器(Loader)

webpack 的目标是，让 webpack 聚焦于项目中的所有资源(asset)，而浏览器不需要关注考虑这些（这并不意味着资源(asset)都必须打包在一起）。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。而且 webpack 只理解 JavaScript。

webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中。

在更高层面，webpack 的配置有两个目标。

1、识别出(identify)应该被对应的 loader 进行转换(transform)的那些文件
2、由于进行过文件转换，所以能够将被转换的文件添加到依赖图表（并且最终添加到 bundle 中）(use 属性)
webpack.config.js

|

var path = require(``'path'``);

const config = {

entry: './path/to/my/entry/file.js'``,

output: {

path: path.resolve(__dirname, 'dist'``),

filename: 'my-first-webpack.bundle.js'

},

module: {

rules: [

{test: /\.(js|jsx)$/, use: 'babel-loader'``}

]

}

};

module.exports = config;

|

以上配置中，我们对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这可以告诉 webpack compiler 如下：

“嘿，webpack compiler，当你碰到「在 require()/import 语句中被解析为 ‘.js’ 或 ‘.jsx’ 的路径」时，在你把它们添加并打包之前，要先使用 babel-loader 去转换”。

重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。在定义错时 webpack 会提出严重的警告。

我们还有尚未提到的 loader，可以设定更多特定属性。

了解更多！

插件(Plugins)

由于 loader 仅在每个文件的基础上执行转换，而 插件(plugins) 最常用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能（查看更多）。webpack 的插件系统极其强大和可定制化。

由于你可以在一个配置多次使用插件用于不同的目的 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。由于需要在一个配置中，多次使用一个插件，来针对不同的目的，因此你需要使用 new 来创建插件的实例，并且通过实例来调用插件。

webpack.config.js

|

const HtmlWebpackPlugin = require(``'html-webpack-plugin'``); //installed via npm

const webpack = require(``'webpack'``); //to access built-in plugins

const path = require(``'path'``);

const config = {

entry: './path/to/my/entry/file.js'``,

output: {

path: path.resolve(__dirname, 'dist'``),

filename: 'my-first-webpack.bundle.js'

},

module: {

rules: [

{test: /\.(js|jsx)$/, use: 'babel-loader'``}

]

},

plugins: [

new webpack.optimize.UglifyJsPlugin(),

new HtmlWebpackPlugin({template: './src/index.html'``})

]

};

module.exports = config;

|

webpack 提供许多开箱可用的插件！查阅我们的[插件列表]# 第三部分:文档-插件(Plugins)

webpack 有一个富插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。

名称 描述
CommonsChunkPlugin 将多个入口起点之间共享的公共模块，生成为一些 chunk，并且分离到单独的 bundle 中，例如，1vendor.bundle.js 和 app.bundle.js
ExtractTextWebpackPlugin 从 bundle 中提取文本（CSS）到分离的文件（app.bundle.css）
ComponentWebpackPlugin 通过 webpack 使用组件
CompressionWebpackPlugin 预先准备的资源压缩版本，使用 Content-Encoding 提供访问服务
I18nWebpackPlugin 为 bundle 增加国际化支持
HtmlWebpackPlugin 用于简化 HTML 文件（index.html）的创建，提供访问 bundle 的服务。
NormalModuleReplacementPlugin 替换与正则表达式匹配的资源

第三部分:文档-配置

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

刚接触 webpack？请查看我们提供的指南，从 webpack 一些核心概念开始学习吧！ >> 注意整个配置中我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。更多「POSIX 和 Windows」的相关信息请查看此章节。

选项

|

var path = require(``'path'``);

module.exports = {

// 点击选项名称，获取文档详细

// 点击带箭头的项目，展示「更多示例 / 高级选项」

<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/](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:///](webpack:///)[resource-path]", // string

// 「devtool 中模块」的文件名模板

[devtoolFallbackModuleFilenameTemplate](/configuration/output``#output-devtoolfallbackmodulefilenametemplate): "[webpack:///](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): [

// 模块规则（配置加载器、解析器等选项）

{

[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$"

[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"，但不匹配 "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): {

/* TODO */

},

[plugins](plugins): [

// ...

],

// 附加插件列表

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

[resolveLoader](/configuration/resolve``#resolveloader): { /* 等同于 resolve */ }

// 独立解析选项的 loader

[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](http://linux.vbird.org/linux_server/0330nfs/0330nfs.php))，最大的功能就是可以透過網路，讓不同的機器、不同的作業系統、可以彼此分享個別的檔案 ( share file )）

},

[node](node): {

/* TODO */

},

[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>

}

|

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342