詳解ignorePlugin

一、ignorePlugin的定義

ignorePlugin是webpack的一個插件，主要作用是忽略特定模塊的編譯。當我們在項目中引入第三方模塊時，有些模塊不需要編譯，而直接使用即可。這時可以通過ignorePlugin插件來實現。

二、ignorePlugin的使用場景

在我們的項目中，有些文件不需要webpack編譯，這時我們可以使用ignorePlugin插件來實現。常見的場景有：

1、使用jQuery等第三方庫時，不需要webpack對其進行編譯。

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
};

2、在使用moment.js庫時，只需要載入需要的語言文件，不需要將所有語言文件全都編譯進去。

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
};

3、在使用大量lodash庫的函數時，我們可以只編譯需要用到的函數相關代碼，避免編譯產生大量無用代碼。

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
};

三、ignorePlugin的原理

ignorePlugin的原理主要是使用了webpack的resolver。

resolver是webpack中用來處理文件依賴關係的一種機制，通過resolver，webpack可以找到需要編譯的文件的路徑，進行編譯打包。

在使用ignorePlugin時，它會在resolver中添加忽略特定文件的規則，從而使得webpack在編譯時忽略這些文件。

四、ignorePlugin的示例代碼

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
};