Webpack3入门指南：FilterPlugin的使用-JavaScript中文网-JavaScript教程资源分享门户

Webpack是一个流行的前端打包工具，它可以将多个模块打包成一个或多个静态资源文件，从而提高网站性能和开发效率。在Webpack的配置文件中，使用插件可以帮助我们实现更多的功能。其中，FilterPlugin是一个非常有用的插件，它可以帮助我们过滤掉不需要的模块。

FilterPlugin是什么？

FilterPlugin是一个Webpack插件，它可以帮助我们过滤掉一些模块，让我们把精力集中在需要的模块上。FilterPlugin需要我们传入一个函数，这个函数用来判断是否保留这个模块。

首先，我们需要在Webpack的配置文件中引入FilterPlugin插件：

const FilterPlugin = require('webpack-filter-plugin');

然后，在配置文件的plugin数组中添加一个FilterPlugin实例，给它传入一个函数：

module.exports = {
  // ...
  plugins: [
    new FilterPlugin(module => /(js|css)$/.test(module.resource)),
  ],
};

上面的例子中，这个函数会过滤掉所有不是JavaScript或CSS文件的模块。

有些依赖可能只在某些情况下才需要使用，或者我们已经手动引入了这些依赖，不需要再由Webpack打包。这时，我们可以使用FilterPlugin来过滤掉这些不需要的依赖。

plugins: [
  new FilterPlugin(module => !/node_modules\/(moment|lodash)\//.test(module.resource)),
],

上面的例子中，这个函数会过滤掉所有位于node_modules目录下的moment和lodash模块。

在某些情况下，我们可能只需要打包一部分文件，而不是整个项目。这时，我们可以使用FilterPlugin来指定需要打包的文件。

plugins: [
  new FilterPlugin(module => /src\/(app|lib)\//.test(module.resource)),
],

上面的例子中，这个函数会打包所有位于src目录下的app和lib文件夹中的模块。

FilterPlugin是一个非常有用的插件，它可以帮助我们过滤掉不需要的模块，提高打包的效率和减少打包后的体积。使用起来非常简单，只需要给它传入一个过滤函数即可。当我们需要过滤掉不需要的依赖或文件时，FilterPlugin可以帮助我们实现这些功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6474ebe2968c7c53b02238d1