webpack學習筆記--配置module

Module

module 配置如何處理模塊。

配置 Loader

 rules  配置模塊的讀取和解析規則，通常用來配置 Loader。其類型是一個數組，數組里每一項都描述了如何去處理部分文件。 配置一項 rules 時大致通過以下方式：

1. 條件匹配：通過  test 、 include 、 exclude  三個配置項來命中 Loader 要應用規則的文件。
2. 應用規則：對選中后的文件通過 use 配置項來應用 Loader，可以只應用一個 Loader 或者按照從后往前的順序應用一組 Loader，同時還可以分別給 Loader 傳入參數。
3. 重置順序：一組 Loader 的執行順序默認是從右到左執行，通過 enforce 選項可以讓其中一個 Loader 的執行順序放到最前或者最后。

下面來通過一個例子來說明具體使用方法：

module: {
  rules: [
    {
      // 命中 JavaScript 文件
      test: /\.js$/,
      // 用 babel-loader 轉換 JavaScript 文件
      // ?cacheDirectory 表示傳給 babel-loader 的參數，用於緩存 babel 編譯結果加快重新編譯速度
      use: ['babel-loader?cacheDirectory'],
      // 只命中src目錄里的js文件，加快 Webpack 搜索速度
      include: path.resolve(__dirname, 'src')
    },
    {
      // 命中 SCSS 文件
      test: /\.scss$/,
      // 使用一組 Loader 去處理 SCSS 文件。
      // 處理順序為從后到前，即先交給 sass-loader 處理，再把結果交給 css-loader 最后再給 style-loader。
      use: ['style-loader', 'css-loader', 'sass-loader'],
      // 排除 node_modules 目錄下的文件
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      // 對非文本文件采用 file-loader 加載
      test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
      use: ['file-loader'],
    },
  ]
}

在 Loader 需要傳入很多參數時，你還可以通過一個 Object 來描述，例如在上面的 babel-loader 配置中有如下代碼：

use: [
  {
    loader:'babel-loader',
    options:{
      cacheDirectory:true,
    },
    // enforce:'post' 的含義是把該 Loader 的執行順序放到最后
    // enforce 的值還可以是 pre，代表把 Loader 的執行順序放到最前面
    enforce:'post'
  },
  // 省略其它 Loader
]

上面的例子中 test include exclude 這三個命中文件的配置項只傳入了一個字符串或正則，其實它們還都支持數組類型，使用如下：

{
  test:[
    /\.jsx?$/,
    /\.tsx?$/
  ],
  include:[
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'tests'),
  ],
  exclude:[
    path.resolve(__dirname, 'node_modules'),
    path.resolve(__dirname, 'bower_modules'),
  ]
}

數組里的每項之間是或的關系，即文件路徑符合數組中的任何一個條件就會被命中。

noParse

noParse 配置項可以讓 Webpack 忽略對部分沒采用模塊化的文件的遞歸解析和處理，這樣做的好處是能提高構建性能。 原因是一些庫例如 jQuery 、ChartJS 它們龐大又沒有采用模塊化標准，讓 Webpack 去解析這些文件耗時又沒有意義。

noParse 是可選配置項，類型需要是 RegExp、[RegExp]、function 其中一個。

例如想要忽略掉 jQuery 、ChartJS，可以使用如下代碼：

// 使用正則表達式
noParse: /jquery|chartjs/

// 使用函數，從 Webpack 3.0.0 開始支持
noParse: (content)=> {
  // content 代表一個模塊的文件路徑
  // 返回 true or false
  return /jquery|chartjs/.test(content);
}

注意被忽略掉的文件里不應該包含 import 、 require 、 define 等模塊化語句，不然會導致構建出的代碼中包含無法在瀏覽器環境下執行的模塊化語句。

parser

因為 Webpack 是以模塊化的 JavaScript 文件為入口，所以內置了對模塊化 JavaScript 的解析功能，支持 AMD、CommonJS、SystemJS、ES6。 parser 屬性可以更細粒度的配置哪些模塊語法要解析哪些不解析，和 noParse 配置項的區別在於 parser 可以精確到語法層面， 而  noParse  只能控制哪些文件不被解析。 parser 使用如下：

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['babel-loader'],
      parser: {
      amd: false, // 禁用 AMD
      commonjs: false, // 禁用 CommonJS
      system: false, // 禁用 SystemJS
      harmony: false, // 禁用 ES6 import/export
      requireInclude: false, // 禁用 require.include
      requireEnsure: false, // 禁用 require.ensure
      requireContext: false, // 禁用 require.context
      browserify: false, // 禁用 browserify
      requireJs: false, // 禁用 requirejs
      }
    },
  ]
}