Webpack 中文文檔

第一部分:概念

概念

webpack 是一個(gè)現(xiàn)代的 JavaScript 應(yīng)用程序的模塊打包器(module bundler)措左。它有著難以置信的配置依痊，然而，我們認(rèn)為你必須在開(kāi)始前先了解四個(gè)核心概念怎披！

作為您的 webpack 學(xué)習(xí)旅程的一部分胸嘁，我們寫(xiě)這篇文檔目的在于向你傳遞這些概念的高度概述，同時(shí)仍然提供特定概念的相關(guān)用例凉逛。

入口(Entry)

webpack 將創(chuàng)建所有應(yīng)用程序的依賴關(guān)系圖表(dependency graph)性宏。圖表的起點(diǎn)被稱之為入口起點(diǎn)(entry point)。入口起點(diǎn)告訴 webpack 從哪里開(kāi)始状飞，并遵循著依賴關(guān)系圖表知道要打包什么毫胜。可以將您應(yīng)用程序的入口起點(diǎn)認(rèn)為是根上下文(contextual root)或 app 第一個(gè)啟動(dòng)文件昔瞧。

在 webpack 中指蚁，我們使用 webpack 配置對(duì)象(webpack configuration object) 中的 entry 屬性來(lái)定義入口。

接下來(lái)我們看一個(gè)最簡(jiǎn)單的例子：

webpack.config.js

module.exports = {

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

};

這里有多種方式聲明應(yīng)用程序所需的特定 entry 屬性自晰。

了解更多凝化！

出口(Output)

將所有的資源(assets)歸攏在一起后，我們還需要告訴 webpack 在哪里打包我們的應(yīng)用程序酬荞。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'

}

};

在上面例子中瞧哟，我們正在通過(guò) output.filename 和 output.path 屬性來(lái)描述 webpack bundle 的名稱，以及我們想要生成(emit)在哪里枪向。

你可能看到項(xiàng)目生成(emitted 或 emit)貫穿我們整個(gè)文檔和插件 API勤揩。它是“生產(chǎn)(produced) 或排放(discharged)”的特殊術(shù)語(yǔ)。

output 屬性還有更多可配置的特性秘蛔，但讓我們花一些時(shí)間先了解一些 output 屬性的最常見(jiàn)的用例陨亡。

了解更多！

加載器(Loader)

webpack 的目標(biāo)是深员，讓 webpack 聚焦于項(xiàng)目中的所有資源(asset)负蠕，而瀏覽器不需要關(guān)注考慮這些（這并不意味著資源(asset)都必須打包在一起）。webpack 把每個(gè)文件(.css, .html, .scss, .jpg, etc.) 都作為模塊處理倦畅。而且 webpack 只理解 JavaScript遮糖。

webpack loader 會(huì)將這些文件轉(zhuǎn)換為模塊，而轉(zhuǎn)換后的文件會(huì)被添加到依賴圖表中叠赐。

在更高層面欲账，webpack 的配置有兩個(gè)目標(biāo)。

1芭概、識(shí)別出(identify)應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換(transform)的那些文件
2赛不、由于進(jìn)行過(guò)文件轉(zhuǎn)換，所以能夠?qū)⒈晦D(zhuǎn)換的文件添加到依賴圖表（并且最終添加到 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;

以上配置中谈山，我們對(duì)一個(gè)單獨(dú)的 module 對(duì)象定義了 rules 屬性俄删，里面包含兩個(gè)必須屬性：test 和 use。這可以告訴 webpack compiler 如下：

“嘿奏路，webpack compiler畴椰，當(dāng)你碰到「在 require()/import 語(yǔ)句中被解析為 ‘.js’ 或 ‘.jsx’ 的路徑」時(shí)，在你把它們添加并打包之前鸽粉，要先使用 babel-loader 去轉(zhuǎn)換”斜脂。

重要的是要記得，在 webpack 配置中定義 loader 時(shí)触机，要定義在 module.rules 中帚戳，而不是 rules。在定義錯(cuò)時(shí) webpack 會(huì)提出嚴(yán)重的警告儡首。

我們還有尚未提到的 loader片任，可以設(shè)定更多特定屬性。

了解更多蔬胯！

插件(Plugins)

由于 loader 僅在每個(gè)文件的基礎(chǔ)上執(zhí)行轉(zhuǎn)換对供，而插件(plugins) 最常用于（但不限于）在打包模塊的“compilation”和“chunk”生命周期執(zhí)行操作和自定義功能（查看更多）。webpack 的插件系統(tǒng)極其強(qiáng)大和可定制化。

由于你可以在一個(gè)配置多次使用插件用于不同的目的想要使用一個(gè)插件产场，你只需要 require() 它鹅髓，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義京景。由于需要在一個(gè)配置中窿冯，多次使用一個(gè)插件，來(lái)針對(duì)不同的目的确徙，因此你需要使用 new 來(lái)創(chuàng)建插件的實(shí)例醒串，并且通過(guò)實(shí)例來(lái)調(diào)用插件。

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 提供許多開(kāi)箱可用的插件米愿！查閱我們的插件列表展示更多信息厦凤。

在 webpack 配置中使用插件是簡(jiǎn)單直接的鼻吮，然而還是有很多用例值得我們深入討論育苟。

了解更多！
Webpack 2.2 中文文檔

第一部分:概念

概念

webpack 是一個(gè)現(xiàn)代的 JavaScript 應(yīng)用程序的模塊打包器(module bundler)椎木。它有著難以置信的配置违柏，然而，我們認(rèn)為你必須在開(kāi)始前先了解四個(gè)核心概念香椎！

作為您的 webpack 學(xué)習(xí)旅程的一部分漱竖，我們寫(xiě)這篇文檔目的在于向你傳遞這些概念的高度概述，同時(shí)仍然提供特定概念的相關(guān)用例畜伐。

入口(Entry)

webpack 將創(chuàng)建所有應(yīng)用程序的依賴關(guān)系圖表(dependency graph)馍惹。圖表的起點(diǎn)被稱之為入口起點(diǎn)(entry point)。入口起點(diǎn)告訴 webpack 從哪里開(kāi)始玛界，并遵循著依賴關(guān)系圖表知道要打包什么万矾。可以將您應(yīng)用程序的入口起點(diǎn)認(rèn)為是根上下文(contextual root)或 app 第一個(gè)啟動(dòng)文件慎框。

在 webpack 中良狈，我們使用 webpack 配置對(duì)象(webpack configuration object) 中的 entry 屬性來(lái)定義入口。

接下來(lái)我們看一個(gè)最簡(jiǎn)單的例子：

webpack.config.js

module.exports = {

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

};

這里有多種方式聲明應(yīng)用程序所需的特定 entry 屬性笨枯。

了解更多薪丁！

出口(Output)

將所有的資源(assets)歸攏在一起后，我們還需要告訴 webpack 在哪里打包我們的應(yīng)用程序馅精。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'

}

};

在上面例子中，我們正在通過(guò) output.filename 和 output.path 屬性來(lái)描述 webpack bundle 的名稱洲敢，以及我們想要生成(emit)在哪里漫玄。

你可能看到項(xiàng)目生成(emitted 或 emit)貫穿我們整個(gè)文檔和插件 API。它是“生產(chǎn)(produced) 或排放(discharged)”的特殊術(shù)語(yǔ)沦疾。

output 屬性還有更多可配置的特性称近，但讓我們花一些時(shí)間先了解一些 output 屬性的最常見(jiàn)的用例第队。

了解更多！

加載器(Loader)

webpack 的目標(biāo)是刨秆，讓 webpack 聚焦于項(xiàng)目中的所有資源(asset)凳谦，而瀏覽器不需要關(guān)注考慮這些（這并不意味著資源(asset)都必須打包在一起）。webpack 把每個(gè)文件(.css, .html, .scss, .jpg, etc.) 都作為模塊處理衡未。而且 webpack 只理解 JavaScript尸执。

webpack loader 會(huì)將這些文件轉(zhuǎn)換為模塊，而轉(zhuǎn)換后的文件會(huì)被添加到依賴圖表中缓醋。

在更高層面可柿，webpack 的配置有兩個(gè)目標(biāo)观挎。

1、識(shí)別出(identify)應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換(transform)的那些文件
2、由于進(jìn)行過(guò)文件轉(zhuǎn)換被去，所以能夠?qū)⒈晦D(zhuǎn)換的文件添加到依賴圖表（并且最終添加到 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;

以上配置中掠哥，我們對(duì)一個(gè)單獨(dú)的 module 對(duì)象定義了 rules 屬性裹刮，里面包含兩個(gè)必須屬性：test 和 use奢讨。這可以告訴 webpack compiler 如下：

“嘿，webpack compiler动雹，當(dāng)你碰到「在 require()/import 語(yǔ)句中被解析為 ‘.js’ 或 ‘.jsx’ 的路徑」時(shí)槽卫，在你把它們添加并打包之前，要先使用 babel-loader 去轉(zhuǎn)換”胰蝠。

重要的是要記得歼培，在 webpack 配置中定義 loader 時(shí)，要定義在 module.rules 中茸塞，而不是 rules躲庄。在定義錯(cuò)時(shí) webpack 會(huì)提出嚴(yán)重的警告。

我們還有尚未提到的 loader翔横，可以設(shè)定更多特定屬性读跷。

了解更多！

插件(Plugins)

由于 loader 僅在每個(gè)文件的基礎(chǔ)上執(zhí)行轉(zhuǎn)換禾唁，而插件(plugins) 最常用于（但不限于）在打包模塊的“compilation”和“chunk”生命周期執(zhí)行操作和自定義功能（查看更多）效览。webpack 的插件系統(tǒng)極其強(qiáng)大和可定制化。

由于你可以在一個(gè)配置多次使用插件用于不同的目的想要使用一個(gè)插件荡短，你只需要 require() 它丐枉，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義掘托。由于需要在一個(gè)配置中瘦锹，多次使用一個(gè)插件，來(lái)針對(duì)不同的目的，因此你需要使用 new 來(lái)創(chuàng)建插件的實(shí)例弯院，并且通過(guò)實(shí)例來(lái)調(diào)用插件辱士。

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 提供許多開(kāi)箱可用的插件！查閱我們的[插件列表]# 第三部分:文檔-插件(Plugins)

webpack 有一個(gè)富插件接口(rich plugin interface)听绳。webpack 自身的多數(shù)功能都使用這個(gè)插件接口颂碘。這個(gè)插件接口使 webpack 變得極其靈活。

名稱	描述
`CommonsChunkPlugin`	將多個(gè)入口起點(diǎn)之間共享的公共模塊椅挣，生成為一些 chunk头岔，并且分離到單獨(dú)的 bundle 中，例如鼠证，`1vendor.bundle.js` 和 `app.bundle.js`
`ExtractTextWebpackPlugin`	從 bundle 中提取文本（CSS）到分離的文件（app.bundle.css）
`ComponentWebpackPlugin`	通過(guò) webpack 使用組件
`CompressionWebpackPlugin`	預(yù)先準(zhǔn)備的資源壓縮版本峡竣，使用 Content-Encoding 提供訪問(wèn)服務(wù)
`I18nWebpackPlugin`	為 bundle 增加國(guó)際化支持
`HtmlWebpackPlugin`	用于簡(jiǎn)化 HTML 文件（`index.html`）的創(chuàng)建，提供訪問(wèn) bundle 的服務(wù)量九。
`NormalModuleReplacementPlugin`	替換與正則表達(dá)式匹配的資源

第三部分:文檔-配置

webpack 是需要傳入一個(gè)配置對(duì)象(configuration object)适掰。取決于你如何使用 webpack，可以通過(guò)兩種方式之一：終端或 Node.js娩鹉。下面指定了所有可用的配置選項(xiàng)攻谁。

剛接觸 webpack？請(qǐng)查看我們提供的指南弯予，從 webpack 一些核心概念開(kāi)始學(xué)習(xí)吧！ >> 注意整個(gè)配置中我們使用 Node 內(nèi)置的 path 模塊个曙，并在它前面加上 __dirname這個(gè)全局變量锈嫩。可以防止不同操作系統(tǒng)之間的文件路徑問(wèn)題垦搬，并且可以使相對(duì)路徑按照預(yù)期工作呼寸。更多「POSIX 和 Windows」的相關(guān)信息請(qǐng)查看此章節(jié)。

選項(xiàng)

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

module.exports = {

// 點(diǎn)擊選項(xiàng)名稱猴贰，獲取文檔詳細(xì)

// 點(diǎn)擊帶箭頭的項(xiàng)目对雪，展示「更多示例 / 高級(jí)選項(xiàng)」

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

// 這里應(yīng)用程序開(kāi)始執(zhí)行

// webpack 開(kāi)始打包

[output](/configuration/output): {

// webpack 如何輸出結(jié)果的相關(guān)選項(xiàng)

[path](/configuration/output``#output-path): path.resolve(__dirname, "dist"), // string

// 所有輸出文件的目標(biāo)路徑

// 必須是絕對(duì)路徑（使用 Node.js 的 path 模塊）

<details><summary>[filename](/configuration/output``#output-filename): "bundle.js", // string</summary>

[filename](/configuration/output``#output-filename): "[name].js", // 用于多個(gè)入口點(diǎn)(entry point)（出口點(diǎn)？）

[filename](/configuration/output``#output-filename): "[chunkhash].js", // 用于[長(zhǎng)效緩存](/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 相對(duì)于 HTML 頁(yè)面

[library](/configuration/output``#output-library): "MyLibrary", // string,

// 導(dǎo)出庫(kù)(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 導(dǎo)出

[libraryTarget](/configuration/output``#output-librarytarget): "commonjs", // 作為 exports 的屬性導(dǎo)出

[libraryTarget](/configuration/output``#output-librarytarget): "amd", // 使用 AMD 定義方法來(lái)定義

[libraryTarget](/configuration/output``#output-librarytarget): "this", // 在 this 上設(shè)置屬性

[libraryTarget](/configuration/output``#output-librarytarget): "var", // 變量定義于根作用域下

[libraryTarget](/configuration/output``#output-librarytarget): "assign", // 盲分配(blind assignment)

[libraryTarget](/configuration/output``#output-librarytarget): "window", // 在 window 對(duì)象上設(shè)置屬性

[libraryTarget](/configuration/output``#output-librarytarget): "global", // property set to global object

[libraryTarget](/configuration/output``#output-librarytarget): "jsonp", // jsonp wrapper

</details>

// 導(dǎo)出庫(kù)(exported library)的類型

[pathinfo](/configuration/output``#output-pathinfo): true, // boolean

// 在生成代碼時(shí)，引入相關(guān)的模塊栅干、導(dǎo)出迈套、請(qǐng)求等有幫助的路徑信息。

[chunkFilename](/configuration/output``#output-chunkfilename): "[id].js",

[chunkFilename](/configuration/output``#output-chunkfilename): "[chunkhash].js", // 長(zhǎng)效緩存(/guides/caching)

// 「附加分塊(additional chunk)」的文件名模板

[jsonpFunction](/configuration/output``#output-jsonpfunction): "myWebpackJsonp", // string

// 用于加載分塊的 JSONP 函數(shù)名

[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 庫(kù)中使用命名的 AMD 模塊

[crossOriginLoading](/configuration/output``#output-crossoriginloading): "use-credentials", // 枚舉

[crossOriginLoading](/configuration/output``#output-crossoriginloading): "anonymous",

[crossOriginLoading](/configuration/output``#output-crossoriginloading): false,

// 指定運(yùn)行時(shí)如何發(fā)出跨域請(qǐng)求問(wèn)題

[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

// 包內(nèi)前置式模塊資源具有更好可讀性

</details>

},

[module](/configuration/module): {

// 關(guān)于模塊配置

[rules](/configuration/module``#module-rules): [

// 模塊規(guī)則（配置加載器碱鳞、解析器等選項(xiàng)）

{

[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"``)

]

// 這里是匹配條件，每個(gè)選項(xiàng)都接收一個(gè)正則表達(dá)式或字符串

// test 和 include 具有相同的作用率拒，都是必須匹配選項(xiàng)

// exclude 是必不匹配選項(xiàng)（優(yōu)先于 test 和 include）

// 最佳實(shí)踐：

// - 只在 test 和文件名匹配中使用正則表達(dá)式

// - 在 include 和 exclude 中使用絕對(duì)路徑數(shù)組

// - 盡量避免 exclude，更傾向于使用 include

[issuer](/configuration/module``#rule-issuer): { test, include, exclude },

// issuer 條件（導(dǎo)入源）

[enforce](/configuration/module``#rule-enforce): "pre",

[enforce](/configuration/module``#rule-enforce): "post",

// 標(biāo)識(shí)應(yīng)用這些規(guī)則禁荒，即使規(guī)則覆蓋（高級(jí)選項(xiàng)）

[loader](/configuration/module``#rule-loader): "babel-loader",

// 應(yīng)該應(yīng)用的 loader，它相對(duì)上下文解析

// 為了更清晰圈浇，-loader后綴在 webpack 2 中不再是可選的

// 查看 [webpack 1 升級(jí)指南](/guides/migrating)召耘。

[options](/configuration/module``#rule-options-rule-query): {

presets: [``"es2015"``]

},

// loader 的可選項(xiàng)

},

{

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

[use](/configuration/module``#rule-use): [

// 應(yīng)用多個(gè) loader 和選項(xiàng)

"htmllint-loader"``,

{

loader: "html-loader"``,

options: {

/* ... */

}

]

},

{ [oneOf](/configuration/module``#rule-oneof): [ /* rules */ ] }

// 只使用這些嵌套規(guī)則之一

{ [rules](/configuration/module``#rule-rules): [ /* rules */ ] }

// 使用所有這些嵌套規(guī)則（合并可用條件）

{ [resource](/configuration/module``#rule-resource): { [and](/configuration/module#condition): [ /* 條件 */ ] } }

// 僅當(dāng)所有條件都匹配時(shí)才匹配

{ [resource](/configuration/module``#rule-resource): { [or](/configuration/module#condition): [ /* 條件 */ ] } }

{ [resource](/configuration/module``#rule-resource): [ /* 條件 */ ] }

// 任意條件匹配時(shí)匹配（默認(rèn)為數(shù)組）

{ [resource](/configuration/module``#rule-resource): { [not](/configuration/module#condition): /* 條件 */ } }

// 條件不匹配時(shí)匹配

],

[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): {

// 解析模塊請(qǐng)求的選項(xiàng)

// （不適用于對(duì)加載器(loader)解析）

[modules](/configuration/resolve``#resolve-modules): [

"node_modules"``,

path.resolve(__dirname, "app"``)

],

// 用于查找模塊的目錄

[extensions](/configuration/resolve``#resolve-extensions): [".js", ".json", ".jsx", ".css"],

// 使用的擴(kuò)展名

[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" 會(huì)導(dǎo)致錯(cuò)誤

// 模塊別名相對(duì)于當(dāng)前上下文導(dǎo)入

},

<details><summary>``/* 可供選擇的別名語(yǔ)法（點(diǎn)擊展示） */``</summary>

[alias](/configuration/resolve``#resolve-alias): [

{

name: "module"``,

// 舊的請(qǐng)求

alias: "new-module"``,

// 新的請(qǐng)求

onlyModule: true

// 如果為 true，只有 "module" 是別名

// 如果為 false歇攻，"module/inner/path" 也是別名

}

],

</details>

<details><summary>``/* 高級(jí)解析選項(xiàng)（點(diǎn)擊展示） */``</summary>

[symlinks](/configuration/resolve``#resolve-symlinks): true,

// 遵循符號(hào)鏈接(symlinks)到新位置

[descriptionFiles](/configuration/resolve``#resolve-descriptionfiles): ["package.json"],

// 從 package 描述中讀取的文件

[mainFields](/configuration/resolve``#resolve-mainfields): ["main"],

// 從描述文件中讀取的屬性

// 當(dāng)請(qǐng)求文件夾時(shí)

[aliasFields](/configuration/resolve``#resolve-aliasfields): ["browser"],

// 從描述文件中讀取的屬性

// 以對(duì)此 package 的請(qǐng)求起別名

[enforceExtension](/configuration/resolve``#resolve-enforceextension): false,

// 如果為 true固惯，請(qǐng)求必不包括擴(kuò)展名

// 如果為 false，請(qǐng)求可以包括擴(kuò)展名

[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): {},

// 為解析的請(qǐng)求啟用緩存

// 這是不安全葬毫，因?yàn)槲募A結(jié)構(gòu)可能會(huì)改動(dòng)

// 但是性能改善是很大的

[cachePredicate](/configuration/resolve``#resolve-cachepredicate): (path, request) => true,

// predicate function which selects requests for caching

[plugins](/configuration/resolve``#resolve-plugins): [

// ...

]

// 應(yīng)用于解析器的附加插件

</details>

},

[performance](/configuration/performance): {

<details><summary>[hints](/configuration/performance``#performance-hints): "warning", // 枚舉 </summary>

[hints](/configuration/performance``#performance-hints): "error", // 性能提示中拋出錯(cuò)誤

[hints](/configuration/performance``#performance-hints): false, // 關(guān)閉性能提示

</details>

[maxAssetSize](/configuration/performance``#performance-maxassetsize): 200000, // 整數(shù)類型（以字節(jié)為單位）

[maxEntrypointSize](/configuration/performance``#performance-maxentrypointsize): 400000, // 整數(shù)類型（以字節(jié)為單位）

[assetFilter](/configuration/performance``#performance-assetfilter): function(assetFilename) {

// 提供資源文件名的斷言函數(shù)

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 嵌入到每個(gè)模塊中

[devtool](/configuration/devtool): "hidden-source-map"``, // SourceMap 不在源文件中引用

[devtool](/configuration/devtool): "cheap-source-map"``, // 沒(méi)有模塊映射(module mappings)的 SourceMap 低級(jí)變體(cheap-variant)

[devtool](/configuration/devtool): "cheap-module-source-map"``, // 有模塊映射(module mappings)的 SourceMap 低級(jí)變體

[devtool](/configuration/devtool): "eval"``, // 沒(méi)有模塊映射，而是命名模塊屡穗。以犧牲細(xì)節(jié)達(dá)到最快贴捡。

</details>

// 通過(guò)在瀏覽器調(diào)試工具(browser devtools)中添加元信息(meta info)增強(qiáng)調(diào)試

// 犧牲了構(gòu)建速度的source-map' 是最詳細(xì)的。`

[context](/configuration/entry-context``#context): __dirname, // string（絕對(duì)路徑４迳啊）

// webpack 的主目錄

// [entry](/configuration/entry-context) 和 [module.rules.loader](/configuration/module#rule-loader) 選項(xiàng)

// 相對(duì)于此目錄解析

<details><summary>[target](/configuration/target): "web"``, // 枚舉</summary>

[target](/configuration/target): "webworker"``, // WebWorker

[target](/configuration/target): "node"``, // node.js 通過(guò) require

[target](/configuration/target): "async-node"``, // Node.js 通過(guò) fs and vm

[target](/configuration/target): "node-webkit"``, // nw.js

[target](/configuration/target): "electron-main"``, // electron烂斋，主進(jìn)程(main process)

[target](/configuration/target): "electron-renderer"``, // electron，渲染進(jìn)程(renderer process)

[target](/configuration/target): (compiler) => { /* ... */ }, // 自定義

</details>

// 包(bundle)應(yīng)該運(yùn)行的環(huán)境

// 更改塊加載行為(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): { // 對(duì)象

angular: "this angular"``, // this["angular"]

react: { // UMD

commonjs: "react"``,

commonjs2: "react"``,

amd: "react"``,

root: "React"

}

},

[externals](/configuration/externals): (request) => { /* ... */ return "commonjs " + request }

</details>

// 不要遵循/打包這些模塊础废，而是在運(yùn)行時(shí)從環(huán)境中請(qǐng)求他們

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

// ...

],

// 附加插件列表

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

// 獨(dú)立解析選項(xiàng)的 loader

[profile](other-options``#profile): true, // boolean

// 捕獲時(shí)機(jī)信息

[bail](other-options``#bail): true, //boolean

// 在第一個(gè)錯(cuò)誤出錯(cuò)時(shí)拋出汛骂，而不是無(wú)視錯(cuò)誤。

[cache](other-options``#cache): false, // boolean

// 禁用/啟用緩存

[watch](watch``#watch): true, // boolean

// 啟用觀察

[watchOptions](watch``#watchoptions): {

[aggregateTimeout](watch``#watchoptions-aggregatetimeout): 1000, // in ms

// 將多個(gè)更改聚合到單個(gè)重構(gòu)建(rebuild)

[poll](watch``#watchoptions-poll): true,

[poll](watch``#watchoptions-poll): 500, // 間隔單位 ms

// 啟用輪詢觀察模式

// 必須用在不通知更改的文件系統(tǒng)中

// 即 nfs shares（譯者注：[Network FileSystem]([http://linux.vbird.org/linux_server/0330nfs/0330nfs.php](http://linux.vbird.org/linux_server/0330nfs/0330nfs.php))色迂，最大的功能就是可以透過(guò)網(wǎng)路香缺，讓不同的機(jī)器、不同的作業(yè)系統(tǒng)歇僧、可以彼此分享個(gè)別的檔案 ( 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>

}

最后編輯于：2018.04.09 16:55:02

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末图张，一起剝皮案震驚了整個(gè)濱河市锋拖，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌祸轮，老刑警劉巖兽埃，帶你破解...
沈念sama閱讀 206,126評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異适袜，居然都是意外死亡柄错，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)苦酱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)售貌，“玉大人，你說(shuō)我怎么就攤上這事疫萤∷炭纾” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵扯饶，是天一觀的道長(zhǎng)恒削。經(jīng)常有香客問(wèn)我，道長(zhǎng)尾序，這世上最難降的妖魔是什么钓丰？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮每币，結(jié)果婚禮上携丁，老公的妹妹穿的比我還像新娘。我一直安慰自己脯爪，他們只是感情好则北，可當(dāng)我...
茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著痕慢，像睡著了一般。火紅的嫁衣襯著肌膚如雪涌矢。梳的紋絲不亂的頭發(fā)上掖举，一...
開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1贊 284
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音娜庇，去河邊找鬼塔次。笑死，一個(gè)胖子當(dāng)著我的面吹牛名秀，可吹牛的內(nèi)容都是我干的励负。我是一名探鬼主播，決...
沈念sama閱讀 38,276評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼匕得，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼继榆！你這毒婦竟也來(lái)了巾表？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤略吨，失蹤者是張志新（化名）和其女友劉穎集币，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體翠忠，經(jīng)...
沈念sama閱讀 43,400評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡鞠苟，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秽之。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片当娱。...
茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖考榨，靈堂內(nèi)的尸體忽然破棺而出跨细，到底是詐尸還是另有隱情，我是刑警寧澤董虱，帶...
沈念sama閱讀 33,646評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布扼鞋，位于F島的核電站，受9級(jí)特大地震影響愤诱，放射性物質(zhì)發(fā)生泄漏云头。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一淫半、第九天我趴在偏房一處隱蔽的房頂上張望溃槐。院中可真熱鬧，春花似錦科吭、人聲如沸昏滴。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0贊 19
一樁弒父案对人，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)谣殊。三九已至，卻和暖如春牺弄，著一層夾襖步出監(jiān)牢的瞬間姻几，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1贊 260
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工势告，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蛇捌，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,423評(píng)論 2贊 352
代替公主和親
正文我出身青樓咱台，卻偏偏與公主長(zhǎng)得像络拌，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子回溺，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345