一棉姐、概念
本質(zhì)上肛搬，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)岸啡。當 webpack 處理應用程序時蛇捌，它會遞歸地構建一個依賴關系圖(dependency graph)抚恒，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle络拌。
可以從這里了解更多關于 JavaScript 模塊和 webpack 模塊的信息俭驮。
從 webpack v4.0.0 開始，可以不用引入一個配置文件春贸。然而表鳍，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugins)
本文檔旨在給出這些概念的高度概述祥诽，同時提供具體概念的詳盡相關用例。
二瓮恭、入口(entry)
入口起點(entry point)指示 webpack 應該使用哪個模塊雄坪，來作為構建其內(nèi)部依賴圖 的開始。進入入口起點后屯蹦，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的维哈。
每個依賴項隨即被處理，最后輸出到稱之為 bundles 的文件中登澜，我們將在下一章節(jié)詳細討論這個過程阔挠。
可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）脑蠕。默認值為 ./src购撼。
接下來我們看一個 entry 配置的最簡單例子：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
根據(jù)應用程序的特定需求跪削，可以以多種方式配置
entry屬性。從入口起點章節(jié)可以了解更多信息迂求。
三碾盐、出口(output)
output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件揩局，默認值為 ./dist毫玖。基本上凌盯，整個應用程序結(jié)構付枫，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段驰怎，來配置這些處理過程：
webpack.config.js
const 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 的名稱砸西，以及我們想要 bundle 生成(emit)到哪里叶眉。可能你想要了解在代碼最上面導入的 path 模塊是什么芹枷，它是一個 Node.js 核心模塊衅疙，用于操作文件路徑。
你可能會發(fā)現(xiàn)術語生成(emitted 或 emit)貫穿了我們整個文檔和插件 API鸳慈。它是“生產(chǎn)(produced)”或“釋放(discharged)”的特殊術語饱溢。
output屬性還有更多可配置的特性，如果你想要了解更多關于output屬性的概念走芋，你可以通過閱讀概念章節(jié)來了解更多绩郎。
四、loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）翁逞。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊肋杖，然后你就可以利用 webpack 的打包能力，對它們進行處理挖函。
本質(zhì)上状植，webpack loader 將所有類型的文件，轉(zhuǎn)換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊怨喘。
注意津畸，loader 能夠
import導入任何類型的模塊（例如.css文件），這是 webpack 特有的功能必怜，其他打包程序或任務執(zhí)行器的可能并不支持肉拓。我們認為這種語言擴展是有很必要的，因為這可以使開發(fā)人員創(chuàng)建出更準確的依賴關系圖梳庆。
在更高層面暖途，在 webpack 的配置中 loader 有兩個目標：
-
test屬性卑惜，用于標識出應該被對應的 loader 進行轉(zhuǎn)換的某個或某些文件。 -
use屬性丧肴，表示進行轉(zhuǎn)換時残揉，應該使用哪個 loader。
webpack.config.js
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
以上配置中芋浮，對一個單獨的 module 對象定義了 rules 屬性抱环，里面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：
“嘿纸巷，webpack 編譯器镇草，當你碰到「在
require()/import語句中被解析為 '.txt' 的路徑」時，在你對它打包之前瘤旨，先使用raw-loader轉(zhuǎn)換一下梯啤。”
重要的是要記得存哲，在 webpack 配置中定義 loader 時因宇，要定義在
module.rules中，而不是rules祟偷。然而察滑，在定義錯誤時 webpack 會給出嚴重的警告。為了使你受益于此修肠，如果沒有按照正確方式去做贺辰，webpack 會“給出嚴重的警告”
loader 還有更多我們尚未提到的具體配置屬性。
五饲化、插件(plugins)
loader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務吗伤。插件的范圍包括吃靠，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量足淆。插件接口功能極其強大撩笆，可以用來處理各種各樣的任務。
想要使用一個插件缸浦，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中氮兵。多數(shù)插件可以通過選項(option)自定義裂逐。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創(chuàng)建它的一個實例泣栈。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
webpack 提供許多開箱可用的插件卜高！查閱我們的插件列表獲取更多信息弥姻。
在 webpack 配置中使用插件是簡單直接的，然而也有很多值得我們進一步探討的用例掺涛。
