什麼是Webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。
爲什要使用WebPack
現今的很多網頁其實可以看做是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了很多好的實踐方法
- 模塊化，讓我們可以把複雜的程序細化爲小的文件;
- 類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能轉換爲JavaScript文件使瀏覽器可以識別；
- Scss，less等CSS預處理器
…
這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就爲WebPack類的工具的出現提供了需求。
學習使用Webpack。
創建一個bundle文件
先創建一個用於學習的測試目錄，初始化 npm，
npm init -y
使用npm init命令可以自動創建package.json文件,這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。
然後在本地安裝webpack
npm install --save-dev webpack
太慢了 我推薦用淘寶鏡像- -！！！cnpm
因爲使用的是webpack 4+ 版本，還需要安裝 CLI。
npm install --save-dev webpack-cli
在我們的項目目錄下，創建兩個文件夾,src文件夾和dist文件夾，src文件夾用來存放原始數據和我們將寫的JavaScript模塊，dist文件夾用來存放之後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。
然後在public文件夾中創建index.html，在app文件夾中創建index.js。
這個例子在index.js中使用lodash 依賴，我們需要在本地安裝 library：
npm install --save lodash
index.js：
import _ from 'lodash';
function component(){
var element=document.createElement('div');
element.innerHTML=_.join(['hello','webpack',' ']);
return element;
}
document.body.appendChild(component());
index.js 顯式要求引入的 lodash 必須存在，然後將它綁定爲 _（沒有全局作用域污染）。通過聲明模塊所需的依賴，webpack 能夠利用這些信息去構建依賴圖，然後使用圖生成一個優化過的，會以正確順序執行的 bundle。
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>webpack-demo</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
執行 npx webpack，會將我們的腳本作爲入口起點，然後 輸出 爲 main.js。
運行index.html
使用一個配置文件
在 webpack 4 中，可以無須任何配置使用，然而大多數項目會需要很複雜的設置，這就是爲什麼 webpack 仍然要支持 配置文件。
我們創建webpack.config.js
webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
//“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。
現在，讓我們通過新配置文件再次執行構建：
比起 CLI 這種簡單直接的使用方式，配置文件具有更多的靈活性。我們可以通過配置方式指定 loader 規則(loader rules)、插件(plugins)、解析選項(resolve options)，以及許多其他增強功能。