Webpack實戰（四）：教教你如何輕鬆搞定-預處理器（loader）

前面三節，我主要給你們分享了有關webpack的一些配置的知識點，如何打包js文件，而若是咱們遇到其餘類型的資源如圖片、css、字體font等等，咱們該如何處理呢？今天會介紹預處理器（loader），它賦予了Webpack可處理不一樣資源類型的能力，極大豐富了其可擴展性。

若是想了解Webpack的基礎配置能夠參考如下地址：

Webpack實戰（一）：Webpack打包工具安裝及參數配置

Webpack實戰（二）：webpack-dev-server的介紹與用法

Webpack實戰（三）：做爲前端你不得不懂的Webpack資源入口和出口的配置

在一個項目中，咱們要面臨着各類各樣的資源，如何讓Webpack很好的處理這些資源呢？這個時候咱們須要藉助於預處理器（loader），loader的字面意思是裝載器，在Webpack中它的實際功能則更像是預處理器。Webpack自己只認識JavaScript，對於其餘類型的資源必須預先定義一個或多個loader對其進行轉譯，輸出爲Webpack可以接收的形式再繼續進行，所以loader作的其實是一個預處理的工做。

loader配置

1. loader引入 若是咱們要引入css文件，webpack是無法處理的，如

// common.css
body {
  font-size: 20px;
  background: #0fc;
}
複製代碼

//index.js
import './common.css'
複製代碼

執行的結果如上圖，因而可知，Webpack是沒法處理css文件，咱們須要給安裝預處理css-loader。安裝步驟以下

npm install --save-dev css-loader
複製代碼

而後咱們將loader 引入項目中，配置webpack.config.js配置以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development'，
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [ 'css-loader'],
      },
    ],
  }
}
複製代碼

與loader相關的配置都在module對象中，其中module.rules表明了模塊的處理規則。每條規則內部能夠包含不少配置項，這裏咱們只使用了最重要的兩項—test和use。

• test可接收一個正則表達式或者一個元素爲正則表達式的數組，只有正則匹配上的模塊纔會使用這條規則。 如以/.css$/來匹配全部以.css結尾的文件。
• use可接收一個數組，數組包含該規則所使用的loader，也能夠是字符串，對象等。

不少時候，在處理某一類資源時咱們都須要使用多個loader。如，對於SCSS類型的資源來講，咱們須要sass-loader來處理其語法，並將其編譯爲CSS；接着再用css-loader處理CSS的各種加載語法；最後使用style-loader來將樣式字符串包裝成style標籤插入頁面。 下面引入style-loader,安裝命令以下：

npm install --save-dev style-loader
複製代碼

配置代碼以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development'，
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
}
複製代碼

此時再進行打包，樣式就會生效了，應該會看到頁面中插入了一個style標籤，包含了CSS文件的樣式，這樣咱們就完成了從JS文件加載CSS文件的配置。 打包效果以下圖：

運行效果以下圖

把style-loader放在css-loader前面，這是由於在Webpack打包時是按照數組從右邊往左邊的順序將資源交給loader處理的，所以要把最後生效的放在左邊。

loader做爲預處理器一般會給開發者提供一些配置項，在引入loader的時候能夠經過options將它們傳入

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 
          {
            loader: 'css-loader',
            options: {
              // 有關css-loader的配置
            }
          }
        ],
      },
    ],
  }
複製代碼

2. 其餘配置 exclude與include是用來排除或包含指定目錄下的模塊，可接收正則表達式或者字符串（文件絕對路徑），以及由它們組成的數組

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      },
    ],
  }
複製代碼

exclude規則內的使node_modules中的模塊不會執行這條規則。該配置項一般是必加的，不然可能拖慢總體的打包速度。

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        include: /src/
      },
    ],
  }
複製代碼

include表明該規則只對正則匹配到的模塊生效。假如咱們將include設置爲工程的源碼目錄，天然而然就將node_modules等目錄排除掉了。

若是exclude 和include同時存在，則exclude權限比較高

resource與issuer可用於更加精確地肯定模塊規則的做用範圍,在Webpack中，咱們認爲被加載模塊是resource，而加載者是issuer

module: {
    rules: [
      {
        use: ['style-loader', 'css-loader'],
        resource: {
          test: /\.css$/i,
          exclude: /node_modules/
        },
        issuer: {
          test: /\.js$/i,
          exclude: /node_modules/
        }
      },
    ],
  }
複製代碼

經過添加resource對象來將外層的配置包起來，區分了resource和issuer中的規則，這樣就一目瞭然了。

enforce用來指定一個loader的種類，只接收「pre」或「post」兩種字符串類型的值。事實上，咱們也能夠不使用enforce而只要保證loader順序是正確的便可。配置enforce主要的目的是使模塊規則更加清晰，可讀性更強，尤爲是在實際工程中，配置文件可能達到上百行的狀況，難以保證各個loader都按照預想的方式工做，使用enforce能夠強制指定loader的做用順序。

經常使用的預處理器

1. babel-loader用來處理ES6+並將其編譯爲ES5，它使咱們可以在工程中使用最新的語言特性，同時沒必要特別關注這些特性在不一樣平臺的兼容問題。

npm install babel-loader babel-core babel-preset-env
複製代碼

• babel-loader：它是使Babel與Webpack協同工做的模塊。
• babel-core：顧名思義，它是Babel編譯器的核心模塊。
• babel-preset-env：它是Babel官方推薦的預置器，可根據用戶設置的目標環境自動添加所需的插件和補丁來編譯ES6+代碼。 配置文件以下：

{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            [
              'env', {
                modules: false
              }
            ]
          ]
        }
      }
    }
複製代碼

因爲babel文件很大沒，因此要排除node_modules|bower_components 對於babel-loader自己咱們添加了cacheDirectory配置項，它會啓用緩存機制，在重複打包未改變過的模塊時防止二次編譯，一樣也會加快打包的速度 babel-loader支持從.babelrc文件讀取Babel配置，所以能夠將presets和plugins從Webpack配置文件中提取出來，也能達到相同的效果。

2. ts-loader ts-loader與babel-loader的性質相似，它是用於鏈接Webpack與Typescript的模塊,安裝命令以下：

npm install ts-loader typescript
複製代碼

webapck.config.js配置以下

rules: [
	{
	test: /\.ts$/,
	use:'ts-loader' 
	}
]
複製代碼

3. html-loader html-loader用於將HTML文件轉化爲字符串並進行格式化，這使得咱們能夠把一個HTML片斷經過JS加載進來。
4. handlebars-loader handlebars-loader用於處理handlebars模板，在安裝時要額外安裝handlebars。
5. file-loader file-loader用於打包文件類型的資源，並返回其publicPath。

總結

有關Webpack預處理器（loader）就暫時分析到這裏，這僅表明我的觀點,歡迎拍磚，如想了解更多請掃描下面：