loader 和 plugin 差別和自己手動實作

webpack的打包原理

識别入口檔案

通過逐層識别子產品依賴(Commonjs、amd或者es6的import，webpack都會對其進行分析，來擷取代碼的依賴)

webpack做的就是分析代碼，轉換代碼，編譯代碼，輸出代碼

最終形成打包後的代碼

1. loader

   loader從字面的意思是 加載 。

   loader是一個轉換器，将A檔案進行編譯成B檔案，比如：将A.less轉換為A.css，單純的檔案轉換過程。

   由于webpack 本身隻支援js和json這兩種格式的檔案，隻能打包commonjs規範的檔案，對于其他檔案需要通過loader将其轉換為commonJS規範的檔案後，webpack才能解析到。對css、圖檔等格式的檔案無法打包，可以使用loader引入第三方的子產品進行打包。

         loader雖然是擴充了 webpack ，但是它隻專注于轉化檔案（transform）這一個領域，完成壓縮，打包，語言翻譯。

         loader是運作在NodeJS中，僅僅隻是為了打包。

   如：css-loader和style-loader子產品是為了打包css的

         babel-loader和babel-core子產品時為了把ES6的代碼轉成ES5

         url-loader和file-loader是把圖檔進行打包的。

   postcss-loader、sass-loader

2. plugin

   plugin是一個擴充器，它豐富了webpack本身，針對是loader結束後，webpack打包的整個過程，它并不直接操作檔案，而是基于事件機制工作，會監聽webpack打包過程中的某些節點，執行廣泛的任務

   plugin也是為了擴充webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不僅隻局限在打包、資源加載上，它的功能要更加豐富。從打包優化和壓縮，到重新定義環境變量，功能強大到可以用來處理各種各樣的任務。

   webpack提供了很多開箱即用的插件：CommonChunkPlugin主要用于提取第三方庫和公共子產品，避免首屏加載的bundle檔案，或者按需加載的bundle檔案體積過大，導緻加載時間過長，是一把優化的利器。

   而在多頁面應用中，更是能夠為每個頁面間的應用程式共享代碼建立bundle。

   插件可以攜帶參數，是以在plugins屬性傳入new執行個體。

   plugin也是為了擴充webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不僅隻局限在打包，資源的加載上，它的功能要更加豐富。從打包優化和壓縮，到重新定義環境變量，功能強大到可以用來處理各種各樣的任務。webpack提供了很多開箱即用的插件：CommonChunkPlugin主要用于提取第三方庫和公共子產品，避免首屏加載的bundle檔案，或者按需加載的bundle檔案體積過大，導緻加載時間過長，是一把優化的利器。而在多頁面應用中，更是能夠為每個頁面間的應用程式共享代碼建立bundle。

         插件可以攜帶參數，是以在plugins屬性傳入new執行個體。

   如：

   1）、針對html檔案打包和拷貝（還有很多設定）的插件：html-webpack-plugin。

          不但完成了html檔案的拷貝，打包，還給html中自動增加了引入打包後的js檔案的代碼（<script src=""></script>），還能指明把js檔案引入到html檔案的底部等等。

   具體使用，可以檢視：webpack打包（主要是處理html檔案），并啟動伺服器

   代碼如下：

   plugins:[   

           //對html模闆進行處理，生成對應的html,引入需要的資源子產品

           new HtmlWebpackPlugin({

               template:'./index.html',//模闆檔案，即需要打包和拷貝到build目錄下的html檔案

               filename:'index.html',//目标html檔案

               chunks:['useperson'],//對應加載的資源,即html檔案需要引入的js子產品

               inject:true//資源加入到底部，把子產品引入到html檔案的底部

           })

     ]

3. 從運作時機的角度區分

    1 ). loader運作在打封包件之前（loader為在子產品加載時的預處理檔案）

    2).  plugins在整個編譯周期都起作用。

4. 實作