深刻淺出webpack學習(4)--module

Module

module的配置如何處理模塊。

配置Loader

rules 配置模塊的讀取和解析規則， 一般用來配置loader， 其類型是一個數組， 數組裏每一項都描述瞭如何去處理部分文件。

配置一項rules大體經過如下方式：

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

例子：

module: {
    rules: [
        {
            test: /\.js$/, 
            use: ['babel-loader?cacheDirectory'],
            include: path.resolve(__dirname, 'src')
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            exclude: path.resolve(__dirname, 'node_modules')
        }
    ]
}

在loader須要傳入不少參數的時候，咱們還能夠經過一個object來描述，如：

use: [
    {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        },
         // enforce:'post' 的含義是把該 Loader 的執行順序放到最後
        // enforce 的值還能夠是 pre，表明把 Loader 的執行順序放到最前面
        enforce:'post'
    }
]

上面例子中 test、include、exclude這三種命中文件的配置項只傳入一個字符串或者是正則，其實他們還支持數組類型：

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

noParse

noParse能夠讓webpack忽略對部分沒有采用模塊化的文件的遞歸解析和處理，這樣作的好處是能提升構建性能。緣由是一些庫例如jq這些，龐大又沒有采用模塊化標準，讓webpack去解析是沒有意義的。
noParse是可選配置下，類型是：RegExp, [RegExp], function其中一個。

noParse: /jquery|chartjs/

noParse: (content) => {
    //content表明一個模塊的文件路徑
    //返回true of false
    return /jquery|chartjs/.test(content)
}

parser

由於webpack是以模塊化的JavaScript文件爲入口，因此內置了對模塊化JavaScript的解析功能。支持AMD、Commonjs、SystemJs、ES6。parse屬性能夠更細粒度的配置哪些模塊語法要解析，哪些不解析。和noParse的區別在於parser能夠精確道語法層面上。noParse只能控制哪些文件不進行解析。

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