webpack 是一個現代 JavaScript 應用的模塊打包器。它擁有難以置信的可配置性, 然而, 在你開始使用之前，以下 四個核心概念是你必須理解的 ！
做為你的webpack學習之旅的開始，我撰寫這篇文章旨在通過介紹這些概念給你一個 高層次概述，同時也提供到這些概念特定用例的鏈接。
入口（Entry）
webpack建立了一個應用程序所有依賴的關系圖。關系圖的起點被稱之為 _入口 _。 _入口 _告訴 webpack 從 _哪里開始 _，并順著著依賴關系圖知道 需要打包什么 。你可以將你的應用入口 認為是根上下文(contextual root) 或** app第一個啟動文件**。
在webpack中，我們用entry屬性定義入口 在我們的 webpack 配置對象中.
舉個最簡單的例子，如下:
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
有多種方式去聲明應用程序所需的特定 entry 屬性。
出口（Output）
當你已經將所有的資源被打包到一起，我們仍需要告訴 webpack 在哪里（具體位置）打包我們的應用。wepback 的 output 屬性描述了如何處理打包代碼。
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'
}
};
在上面例子中，我們正在通過output.filename和output.path屬性來描述 webpack 包的名稱，以及我們想要打包文件生成的位置。
Tip:
你可能看到項目 生成 貫穿我們整個文檔和插件 API。它是"生產或排放（produced or discharged）"的特殊術語。
output 屬性具有更多可配置的特性，但先讓我們花一點時間去了解 output屬性的一些最常見的用例。
加載器(Loader)
webpack 的目標是：讓webpack 來關注項目中的所有資源，而不是瀏覽器（這并不意味著資源都必須打包在一起）。 webpack 把 每個文件(.css, .html, .scss, .jpg, etc.) 都作為模塊 處理。即便 webpack 只了解 JavaScript。
加載器在webpack中扮演著“將這些資源文件轉化為模塊”的角色，正如webpack將這些模塊添加到你的依賴圖中。
webpack 配置在更高層面中有兩個目標。
- 識別出應該被特定的加載器轉化的文件。（
test屬性） - 轉換能夠被添加到依賴圖表的文件（并且最終打包）(
loader屬性)
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;
以上配置中，我們定義了單模塊的rules屬性的兩個必選屬性：test和 loader。它告訴 webpack 編譯器如下：
"嘿，webpack 編譯器，當你碰到「在
require()/import語句中被解析為 '.js' 或 '.jsx' 的路徑」時，在你把它們添加并打包之前，要先使用 babel-loader 去轉換他們"
特別需要注意的是在 webpack 配置中定義 loader 時，要定義在
module.rules中，而不是rules。否則，webpack會提示錯誤。
我們還有尚未提到的 loader，可以設定更多特定屬性。
插件（ Plugins）
由于加載器僅基于單個文件處理轉換，插件
則最常用于（但不限于）在打包模塊的“編譯”和“組塊”時執行操作和自定義功能（查看更多）。webpack 的插件系統極其強大和可定制。
為了使用插件，你只需要 require() 它們，并且把它們添加到 plugins 數組。多數插件可以通過選項(option)自定義。由于你可以在一個配置多次使用插件用于不同的目的，因此你需要使用 new 來創建插件的實例，并且調用插件。
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 提供了許多開箱可用的插件！歡迎查閱我們的插件列表,獲得更多信息。
在 webpack 配置中插件是直接使用的，然而還是有很多用例值得我們深入探討。
下一篇：入口
