為什么要使用模塊打包工具
1.模塊化開發ES Modules存在兼容性問題 打包之后成產階段編譯為ES5 解決兼容性問題
2.模塊文件過多 網絡請求頻繁 開發階段把散的模塊打包成一個模塊 解決網絡請求頻繁問題
3.支持不同類型的資源模塊
對於有兼容問題的代碼,我們可以通過模塊加載器（Loader）編譯轉化，代碼拆分（按需加載）引入資源模塊，比如import css,
打包工具解決的是前端整體的模塊化 並不單指 JavaScript模塊化，而是指對所有的資源進行模塊化
webpack 配置文件
webpack4.0之后的版本支持0配置的情況進行打包,webpack默認打包的入口文件為src/index.js到dist/main.js,很多時候我們都需要
自定義路徑，需要添加webpack的配置文件,在根目錄下創建webpack.config.js,這個文件運行到node環境下,使用commonjs規范，
比如：指定入口文件及出口文件
webpack4新增了工作模式的功能，大大簡化了webpack的復雜程度，針對不同環境的幾組預設問題,如上圖所示的簡單配置中,沒有
指定mode的屬性，wenpack會按照production模式去工作,這對生成環境是很好的,但是沒辦法去閱讀,因為代碼壓縮編譯過了,
有三種模式
1.development開發模式 優化打包速度，代碼中會添加一些調試輔助
2.none 模式 webpack運行最原始的打包 不會去做任何額外的處理
3.production模式
可以在配置文件中配置mode屬性
WebPack 資源模塊加載
上文中提到過webpack不僅是JS的模塊打包工具，也是整個前端工程的模塊化打包工具,也就是說我們可以引入前端項目中的任意類
型文件,但是webpack內部默認只會處理JavaScript文件,這時候我們需要配置loader處理對應的文件,下面嘗試下打包css文件(正常開發
中不會以css為入口文件),安裝下這個loader.
yarn add css-loader --dev //css-loader作用是將我們css文件轉化為js模塊
yarn add style-loader --dev //style-loader是將轉化的js模塊展示到頁面上
loader是webpack的核心特性,借助於loader就可以加載任何類型的資源
Webpack 導入資源模塊
一般webpack的打包/運行入口是JS文件，因為javascript驅動整個前端應用的業務,然后在JS中以import的方式引入css,圖片，文字等
及一切javaScript所需要的資源，這也是webpack的核心思想,保證所有必須的資源都能打包進去。
Webpack 文件資源加載器及 URL加載器
文件資源加載器:還有一些比較大的我們需要用到file-loader
yarn add file-loader --dev //處理體積比較大的圖片字體等文件 安裝依賴
在說url加載器之前先說下Data Urls是一種特殊的協議,他可以直接用來表示一個文件內容，在訪問url時就不會訪問任何的http請求,達
到減少http請求的效果,所以我們可以以代碼的形式轉化任何文件,這時候我們需要用到加載器url-loader,
yarn add url-loader --dev //通過url-loader轉化為data url的形式。
url-loader適用於體積比較小的資源，因為體積比較大的資源會造成我們的打包結果非常大，從而影響運行速度，這里我們只需要把配
置文件中的file-loader，替換成url-loader
針對小文件使用url-loader,嵌入代碼減少請求次數,針對大文件單獨獲取存放，提高加載速度用file-loader,file-loader和url-loader必須
要同時安裝,雖然配置文件中是url-loader,如圖所示當大於10KB時還是會運行file-loader(這里啰嗦下...)
Webpack js編譯加載器
把ES2015等js代碼的新特性編譯成原生js
yarn add babel-loader @babel/preset-env --dev
Webpack 模塊加載方式
webpack遵循不同的導出和導入文件的標准,但是建議不要混淆，最好只使用一種標准
CSS中加載其它css的方式 @import url(xxx.css);
加載html的loader
yarn add html-loader --save
Webpack 核心工作原理
以JS為入口文件,通過require或者import的方式層層依賴 形成一個依賴樹，遞歸依賴樹找到對應的文件，找到對應的loader屬性,找到
模塊對應的加載器去加載模塊，實現整個項目的打包,loader機制是Webpack的核心。
Webpack 開發一個Loader
首先創建一個.md文件about.md,創建一個markdown-loader.js文件,
由於webpack打包返回的結果必須為js代碼，要么makedown解析模塊導出結果交給下個模塊,繼續處理直到最終導出JS代碼形式，要
么makedown導出后解析成字符串直接return出去
第一種方案
創建一個解析makedown的解析模塊
yarn add marked --dev 安裝解析makedown的模塊，打包結果為html字符串
第二種方案
makedown打包結果傳給html-loder
yarn add html-loader --dev html-loader
所以說loader就是一個從輸入到輸出的轉換，對於同一個資源可以依次使用多個Loader