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
      }
    },
  ]
}