webpack
與gulp的區別
gulp xxx
gulpfile.js
壓縮合並程式碼
啟動服務
提交git
往伺服器提交檔案
編譯程式碼
----------------------------------------------
入口（entry）
輸出（output）
loader
外掛（plugins）

模組打包器
css images js json 視訊 音訊 iconfont

1.npm init
2.yarn add webpack webpack-cli --dev
mode:development(開發版本)|production(生產環境)
開發環境不進行壓縮

webpack 核心打包工具
webpack-cli 命令列工具
babel-loader webpack和babel的橋樑
@babel-core babel的核心程式碼
@babel-preset-env 設定通用的es6編譯版本
plugins：由於外掛可以攜帶引數/選項，你必須在 webpack 配置中，向 plugins 屬性傳入 new 例項

注意：為什麼只使用了url-loader
webpack.dev.config.js中使用file-loader，但是依然打包成功了。我們需要了解file-loader和url-loader的關係。
url-loader和file-loader是什麼關係
簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內建了file-loader。
url-loader工作分兩種情況：
1.檔案大小小於limit引數，url-loader將會把檔案轉為DataURL（Base64格式）；
2.檔案大小大於limit，url-loader會呼叫file-loader進行處理，引數也會直接傳給file-loader。