webpack3-loader和plugin

1、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有三種寫法：

• 直接用use：

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

• 將use換成loader：

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

• 使用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
                  }
                }
              ]
            }
          ]
        },

2、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模板路徑和文件名稱。