概念
本質(zhì)上然遏，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應(yīng)用程序時吧彪，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊丢早，然后將所有這些模塊打包成一個或多個 bundle姨裸。
從 webpack v4.0.0 開始，可以不用引入一個配置文件怨酝。然而傀缩，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：
入口(entry)
輸出(output)
loader
插件(plugins)
入口(entry)
入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊农猬，來作為構(gòu)建其內(nèi)部依賴圖的開始赡艰。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的斤葱。
每個依賴項隨即被處理慷垮，最后輸出到稱之為 bundles 的文件中，我們將在下一章節(jié)詳細討論這個過程揍堕。
可以通過在 webpack 配置中配置 entry 屬性料身，來指定一個入口起點（或多個入口起點）。默認值為 ./src衩茸。
接下來我們看一個 entry 配置的最簡單例子：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
出口(output)
output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles芹血，以及如何命名這些文件，默認值為 ./dist楞慈♂Ｖ颍基本上，整個應(yīng)用程序結(jié)構(gòu)囊蓝，都會被編譯到你指定的輸出路徑的文件夾中饿悬。你可以通過在配置中指定一個 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 核心模塊 操作文件路徑。
loade
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）函卒。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊辆憔，然后你就可以利用 webpack 的打包能力，對它們進行處理报嵌。
本質(zhì)上虱咧，webpack loader 將所有類型的文件，轉(zhuǎn)換為應(yīng)用程序的依賴圖（和最終的 bundle）可以直接引用的模塊锚国。
//注意腕巡，loader 能夠 import 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能血筑，其他打包程序或任務(wù)執(zhí)行器的可能并不支持绘沉。我們認為這種語言擴展是有很必要的，因為這可以使開發(fā)人員創(chuàng)建出更準確的依賴關(guān)系圖豺总。
在更高層面车伞，在 webpack 的配置中 loader 有兩個目標：
test 屬性，用于標識出應(yīng)該被對應(yīng)的 loader 進行轉(zhuǎn)換的某個或某些文件喻喳。
use 屬性另玖，表示進行轉(zhuǎn)換時，應(yīng)該使用哪個 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)換一下〕嗵祝”
模式
通過選擇 development 或 production 之中的一個飘痛，來設(shè)置 mode 參數(shù)，你可以啟用相應(yīng)模式下的 webpack 內(nèi)置的優(yōu)化
module.exports = {
mode: 'production'
};
