## webpack 配置
### 概念
>本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(static module bundler)。在 webpack 處理應用程序時，它會在內部創建一個依賴圖(dependency graph)，用于映射到項目需要的每個模塊，然后將所有這些依賴生成到一個或多個bundle。
>
從 webpack 4.0.0 版本開始，可以不用通過引入一個配置文件打包項目。然而，webpack 仍然還是 高度可配置的，并且能夠很好的滿足需求。
webpack 的核心概念：
1. 入口（entry）
2. 輸出（output）
3. loader
4. 插件（plugins）
我們需要在根目錄下創建一個 `webpack.config.js` 的文件，使用 Commonjs 規范來進行書寫。
#### 入口（entry）
入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
可以通過在 webpack 配置中配置 `entry` 屬性，來指定一個入口起點（或多個入口起點）。默認值為 `./src` 。
```js
module.exports = {
entry: "./src/index.js",
};
```
`entry` 屬性的單個入口語法，是下面的簡寫：
```js
module.exports = {
entry: {
main: "./src/index.js",
}
};
```
> 當你向 `entry` 傳入一個數組時會發生什么？向 `entry` 屬性傳入「文件路徑(file path)數組」將創建“多個主入口(multi-main entry)”。在你想要多個依賴文件一起注入，并且將它們的依賴導向(graph)到一個“chunk”時，傳入數組的方式就很有用。
>
多個入口文件處理
```js
module.exports = {
entry: {
main: "./src/index.js",
app: './src/app.js'
}
};
```
> 根據經驗：每個 HTML 文檔只使用一個入口起點。 當然也可以使用多個，但是推薦一個使用一個
[了解更多](https://www.webpackjs.com/concepts/entry-points/)
#### 輸出（output）
`output` 屬性告訴 `webpack` 在哪里輸出它所創建的 `bundles`，以及如何命名這些文件，默認值為 `./dist`。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 `output` 字段，來配置這些處理過程：
```js
const path = require('path');
module.exports = {
entry: "./src/index.js"
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
```
當然上面的位置文件名都是可以改變的，可以自定義配置。
在上面的示例中，我們通過 `output.filename` 和 `output.path` 屬性，來告訴 `webpack bundle` 的名稱，以及我們想要 bundle 生成(emit)到哪里
[了解更多](https://www.webpackjs.com/concepts/output/)
#### loader
'
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。
本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。
> 注意，loader 能夠 `import` 導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務執行器的可能并不支持。我們認為這種語言擴展是有很必要的，因為這可以使開發人員創建出更準確的依賴關系圖。
在更高層面，在 webpack 的配置中 loader 有兩個目標：
1. `test` 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。
2. `use` 屬性，表示進行轉換時，應該使用哪個 loader。
```js
const path = require('path');
const config = {
entry: "./src/index.js"
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
```
以上配置中，對一個單獨的 module 對象定義了 rules 屬性，里面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 如下信息：
>“嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先使用 raw-loader 轉換一下。”
>
[了解更多](https://www.webpackjs.com/concepts/loaders/)
#### 插件（plugins）
loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。
想要使用一個插件，你只需要 `require()` 它，然后把它添加到 `plugins` 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 `new` 操作符來創建它的一個實例。
```js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
```
webpack 提供許多開箱可用的插件！查閱[插件列表](https://www.webpackjs.com/plugins/)獲取更多信息。
在 webpack 配置中使用插件是簡單直接的，然而也有很多值得我們進一步探討的用例。
[了解更多](https://www.webpackjs.com/concepts/plugins/)
