0、目錄
1、Webpack概念
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖會映射項目所需的每個模塊，並生成一個或多個 bundle。
從 v4.0.0 開始**，webpack 可以不用再引入一個配置文件**來打包項目，然而，但它仍然有着 高度可配置性，可以很好滿足你的需求。
在開始前你需要先理解一些核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugin)
- 模式(mode)
- 瀏覽器兼容性(browser compatibility)
本文檔旨在給出這些概念的高度概述，同時提供具體概念的詳盡相關用例。
爲了更好地理解模塊打包工具背後的理念，以及在底層它們是如何運作的，請參考以下資源：
- 手動打包一個應用程序
- 實時創建一個簡單打包工具
- 一個簡單打包工具的詳細說明
2、入口（entry）
入口起點(entry point)指示 webpack 應該使用哪個模塊，來作爲構建其內部 依賴圖(dependency graph) 的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
默認值是 ./src/index.js，但你可以通過在 webpack configuration 中配置 entry 屬性，來指定一個（或多個）不同的入口起點。例如：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
3、輸出（output）
output 屬性告訴 webpack 在哪裏輸出它所創建的 bundle，以及如何命名這些文件。主要輸出文件的默認值是 ./dist/main.js，其他生成文件默認放置在 ./dist 文件夾中。
你可以通過在配置中指定一個 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 核心模塊，用於操作文件路徑。
4、Loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 讓 webpack 能夠去處理其他類型的文件，並將它們轉換爲有效 模塊，以供應用程序使用，以及被添加到依賴圖中。
注意，loader 能夠 import 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務執行器的可能並不支持。我們認爲這種語言擴展是很有必要的，因爲這可以使開發人員創建出更準確的依賴關係圖。
在更高層面，在 webpack 的配置中 loader 有兩個屬性：
（1）test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
（2）use 屬性，表示進行轉換時，應該使用哪個 loader。
webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
以上配置中，對一個單獨的 module 對象定義了 rules 屬性，裏面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：
“嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 ‘.txt’ 的路徑」時，在你對它打包之前，先 使用 raw-loader 轉換一下。”
要的是要記住，在 webpack 配置中定義 rules 時，要定義在 module.rules 而不是 rules 中。爲了使你受益於此，如果沒有按照正確方式去做，webpack 會給出警告。
請記住，使用正則表達式匹配文件時，你不要爲它添加引號。也就是說，/.txtKaTeX parse error: Can't use function '\.' in math mode at position 7: / 與 '/\̲.̲txt/’/ “/.txt$/” 不一樣。前者指示 webpack 匹配任何以 .txt 結尾的文件，後者指示 webpack 匹配具有絕對路徑 ‘.txt’ 的單個文件; 這可能不符合你的意圖。
5、插件(plugin)
loader 用於轉換某些類型的模塊，而插件則可以用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量。
插件接口(plugin interface) 功能極其強大，可以用來處理各種各樣的任務。
想要使用一個插件，你只需要 require() 它，然後把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因爲不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
在上面的示例中，html-webpack-plugin 爲應用程序生成 HTML 一個文件，並自動注入所有生成的 bundle。
webpack 提供許多開箱可用的插件！查閱 插件列表獲取更多。
6、模式(mode)
通過選擇 development, production 或 none 之中的一個，來設置 mode 參數，你可以啓用 webpack 內置在相應環境下的優化。其默認值爲 production。
module.exports = {
mode: 'production'
};
查看 模式配置 章節瞭解其詳細內容和每個值所作的優化。
7、瀏覽器兼容性(browser compatibility)
webpack 支持所有符合 ES5 標準 的瀏覽器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持舊版本瀏覽器，在使用這些表達式之前，還需要 提前加載 polyfill 。