webpack（2）webpack核心概念
前言
本質上，webpack 是一個用於現代 JavaScript 應用程式的 靜態模組打包工具。當 webpack 處理應用程式時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖對應映射到項目所需的每個模組，並生成一個或多個 bundle。接下來我們就會使用webpack來進行打包
webpack的概念
在開始前我們需要先理解一些核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugin)
- 模式(mode)
- 瀏覽器兼容性(browser compatibility)
- 環境(environment)
入口(entry)
入口起點(entry point) 指示 webpack 應該使用哪個模組，來作為構建其內部 依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。
默認值是 ./src/index.js，但你可以通過在 webpack.config.js 文件中配置 entry 屬性，來指定一個（或多個）不同的入口起點。例如：
module.exports = {
entry: './path/to/my/entry/file.js',
};
單個入口（簡寫）語法
entry 屬性的單個入口語法，參考下面的簡寫：
// webpack.config.js
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
},
};
我們也可以將一個文件路徑數組傳遞給 entry 屬性，這將創建一個所謂的 "multi-main entry"。在你想要一次注入多個依賴文件，並且將它們的依賴關係繪製在一個 "chunk" 中時，這種方式就很有用。
// webpack.config.js
module.exports = {
entry: ['./src/file_1.js', './src/file_2.js'],
output: {
filename: 'bundle.js',
},
};
總結：當你希望通過一個入口為應用程式或工具快速設置 webpack 配置時，單一入口的語法方式是不錯的選擇。然而，使用這種語法方式來擴展或調整配置的靈活性不大。
對象語法
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js',
},
};
對象語法會比較繁瑣。然而，這是應用程式中定義入口的最可擴展的方式。
對象可以使用如下屬性：
dependOn: 當前入口所依賴的入口。它們必須在該入口被載入前被載入。filename: 指定要輸出的文件名稱。import: 啟動時需載入的模組。library: 指定library選項，為當前entry構建一個library。runtime: 運行時chunk的名字。如果設置了，就會創建一個以這個名字命名的運行時chunk，否則將使用現有的入口作為運行時。publicPath: 當該入口的輸出文件在瀏覽器中被引用時，為它們指定一個公共URL地址。
// webpack.config.js
module.exports = {
entry: {
a2: 'dependingfile.js',
b2: {
dependOn: 'a2',
import: './src/app.js',
},
},
};
輸出(output)
可以通過配置 output 選項，告知 webpack 如何向硬碟寫入編譯文件。注意，即使可以存在多個 entry 起點，但只能指定一個 output 配置。
用法
在 webpack 配置中，output 屬性的最低要求是，將它的值設置為一個對象，然後為將輸出文件的文件名配置為一個 output.filename：
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
此配置將一個單獨的 bundle.js 文件輸出到 dist 目錄中。
多個入口起點
如果配置中創建出多於一個 "chunk"（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件），則應該使用佔位符(substitutions)來確保每個文件具有唯一的名稱。
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist',
},
};
// 寫入到硬碟：./dist/app.js, ./dist/search.js
