webpack3-loader和plugin的概念理解

對於loader，它就是一個轉換器，將A文件進行編譯造成B文件，這裏操做的是文件，好比將A.scss或A.less轉變爲B.css，單純的文件轉換過程；

對於plugin，它就是一個擴展器，它豐富了wepack自己，針對是loader結束後，webpack打包的整個過程，它並不直接操做文件，而是基於事件機制工做，會監聽webpack打包過程當中的某些節點，執行普遍的任務。

一、loader

  Loader是webpack最重要的功能之一。Loader讓webpack可以處理不一樣的文件。loader能夠將全部類型的文件轉換爲webpack可以處理的有效模塊，而後利用webpack的打包能力，對他們進行處理。本質上，webpack loader將全部類型的文件，轉換爲應用程序的依賴圖能夠直接引用的模塊。
  例如，

loader能夠將sass，less文件的寫法轉換成css，而不在使用其餘轉換工具。
能夠將ES6或者ES7的代碼，轉換成大多數瀏覽器兼容的JS代碼。
能夠將React中的JSX轉換成JavaScript代碼。

即，在webpack中Loader有兩個目標：

識別出應該被對應的loader進行轉換的文件。（使用test屬性）
轉換這些文件，從而使其可以被添加到依賴圖中（並最終添加到bundle中）。（使用use屬性）

用法：
  Loader須要單獨安裝，須要什麼Loader就使用npm安裝便可。並對應webpack.config.js中的module屬性：

module:{
    rules: [{
        test: 
        use: 
        include/exclude:
        query: 
    }]
}

test：用於匹配處理文件的擴展名的表達式，必須
use：loader名稱，就是要使用的模塊名，必須
include/exclude：手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾），可選
query：爲loader提供額外的設置選項，可選

其中，use有三種寫法：

（1）直接用use：

use:['style-loader','css-loader']

（2） 將use換成loader：

loader:['style-loader','css-loader']

（3）使用use + loader：

use: [{
             loader: "style-loader"
           }, {
             loader: "css-loader",
             options:{}
          }]

例如:

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },
            {
              test: /\.css$/,
              use: [
                { loader: 'style-loader' },
                {
                  loader: 'css-loader',
                  options: {
                    modules: true
                  }
                }
              ]
            }
          ]
        },

二、plugins

  loader被用於轉換某些類型的模塊，而插件則能夠用於執行普遍的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。
  想要使用一個插件，你只須要 require()它，而後將它添加到plugins數組中。多數插件能夠經過選項自定義。你也能夠在一個配置中由於不一樣目的而屢次使用同一個插件，這時須要經過使用new操做符來建立它的一個實例。
剖析：
  webpack插件是一個具備 apply 屬性的JavaScript對象。apply屬性會被webpack compiler調用，而且compiler對象可在整個編譯週期訪問。
用法：
  因爲插件能夠攜帶參數/選項，你必須在webpack配置中，想plugins屬性傳入 new 實例。
例如:

// webpack.config.js文件頭部引入插件
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');

// 插件配置
plugins:[
    new uglify()，
    new htmlPlugin({
          minify:{
            removeAttributeQuotes: true
          },
          hash: true,
          template: './src/index.html'
        }),
  ],

（1）JS 壓縮
  在webpack中JS壓縮使用的是 uglifyjs-webpack-plugin插件。

const uglify = require('uglifyjs-webpack-plugin');

plugins: [
    new uglify();
]

注意： 在開發環境中使用該插件會報錯，由於在開發預覽時須要明確報錯行數和錯誤信息，因此不須要對JS壓縮，而生產環境中才會對JS壓縮。devServer用於開發環境，而壓縮JS用於生產環境，在開發中作生產環境的事情，因此會報錯。

（2）打包HTML
  要將 HTML 文件從 src 目錄下打包到 dist 目錄下，須要藉助 html-webpack-plugin 插件。該插件須要安裝。

npm install html-webpack-plugin --save-dev

配置：

const htmlPlugin = require('html-webpack-plugin');

plugins: [
    new htmlPlugin({
        minify: {
            removeAttributeQuotes: true
        },
        hash: true,
        template: './src/index.html'
    })
]

minify：是對HTML文件進行壓縮，removeAttributeQuotes是去除屬性的雙引號。
hash：爲了不緩存js，加入 hash
template：是要打包的HTML模板路徑和文件名稱。

---

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。

前端最火框架排行榜——小程序二維碼