Home

Index

How to use the IgnorePlugin function from webpack

Find comprehensive JavaScript webpack.IgnorePlugin code examples handpicked from public code repositorys.

webpack.IgnorePlugin is a plugin for the webpack module bundler that allows you to exclude specified modules or files from being included in the bundle.

webpack.common.js

69
70
71
72
73
74
75
76
77
78
},
plugins: [
  // new CleanWebpackPlugin([outputDir], { verbose: false }),
  // This saves us a bunch of bytes by pruning locales (which we don't use)
  // from moment.
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  new webpack.NoEmitOnErrorsPlugin(),
],
resolve: {
  extensions: ['.js', '.ts', '.tsx'],

118

+ 3 other calls in file

deployment.md?plain=1

GitHub: mikro-orm/mikro-orm

217
218
219
220
221
222
223
224
225
226

plugins: [
  // Ignore any of our optional modules if they aren't installed. This ignores database drivers
  // that we aren't using for example.
  new EnvironmentPlugin({ WEBPACK: true }),
  new IgnorePlugin({
    checkResource: resource => {
      const baseResource = resource.split('/', resource[0] === '@' ? 2 : 1).join('/');

      if (optionalModules.has(baseResource)) {

396

How does webpack.IgnorePlugin work?

webpack.IgnorePlugin is a plugin for the webpack module bundler that allows you to exclude specified modules or files from being included in the bundle. The plugin takes in one or more regular expressions or strings that are used to match against the names or paths of modules or files to be ignored. When the webpack bundler processes the code, it will ignore any require/import statements that match the specified patterns, preventing them from being included in the bundle. This can be useful in cases where you want to exclude modules that are only used in certain environments, or to exclude large third-party libraries that are not used by your code. Overall, webpack.IgnorePlugin provides a flexible way to exclude specified modules or files from being included in the bundle, which can help to reduce the size and complexity of the resulting bundle.

webpack.unmix.js

GitHub: smoogipoo/osu-web

185
186
187
188
189
190
191
192
193
194
  'process.env.DOCS_URL': JSON.stringify(process.env.DOCS_URL || 'https://docs.ppy.sh'),
  'process.env.PAYMENT_SANDBOX': JSON.stringify(paymentSandbox),
  'process.env.SHOPIFY_DOMAIN': JSON.stringify(process.env.SHOPIFY_DOMAIN),
  'process.env.SHOPIFY_STOREFRONT_TOKEN': JSON.stringify(process.env.SHOPIFY_STOREFRONT_TOKEN),
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // don't add moment locales to bundle.
new MiniCssExtractPlugin({
  filename: outputFilename('css/[name]', 'css'),
}),
new CopyPlugin({

357

RuntimePlugin.js

GitHub: easyops-cn/next-core

37
38
39
40
41
42
43
44
45
46
      singleton: true,
    },
  },
}).apply(compiler);

new webpack.IgnorePlugin({
  // - `esprima` and `buffer` are optional imported by `js-yaml`
  // we don't need them.
  resourceRegExp: /^(?:esprima|buffer)$/,
}).apply(compiler);

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
const webpack = require("webpack");

const config = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
  plugins: [new webpack.IgnorePlugin(/^(fs|path)$/)],
};

module.exports = config;

In this example, we use webpack.IgnorePlugin to exclude the 'fs' and 'path' modules from being included in the webpack bundle. We create a new instance of the plugin and pass in a regular expression that matches against the names of the modules we want to ignore. We then include the plugin instance in the 'plugins' array of our webpack configuration object. When webpack processes the code, it will ignore any require statements that match the regular expression, preventing the 'fs' and 'path' modules from being included in the bundle. Note that in order to use webpack.IgnorePlugin, you need to have the webpack module bundler installed and configured in your application.

app.webpack.config.js

GitHub: Akylas/oss-weather

501
502
503
504
505
506
507
508
509
510
        })
    );
}
// save as long as we dont use calc in css
config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /reduce-css-calc$/ }));
config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /punnycode$/ }));
config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^url$/ }));

if (!!production && !timeline) {
    console.log('removing N profiling');

+ 8 other calls in file

index.js

GitHub: lukasjhan/create-simple-serverless-app

38
39
40
41
42
43
44
45
46
47
  // Webpack uglify can break mysqljs.
  // https://github.com/mysqljs/mysql/issues/1548
  minimize: false,
},
plugins: [
  new IgnorePlugin(/^encoding$/, /node-fetch/)
],
target: 'node',
module: {
  rules: [

webpack.common.js

GitHub: bippeishan/low-code

252
253
254
255
256
257
258
259
260
261
    chunkFilename: "[id].[hash:6].css"
}),

// IgnorePlugin忽略所有locale，ContextReplacementPlugin可选择支持几种locale
// new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ja|it/),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

// new BundleAnalyzerPlugin({
//     analyzerHost: "127.0.0.1",
//     analyzerPort: "9001"

gulpfile.js

GitHub: zachdaniel/jsoneditor

86
87
88
89
90
91
92
93
94
95
},
module: webpackConfigModule,
plugins: [
  bannerPlugin,
  new webpack.IgnorePlugin({ resourceRegExp: /^ace-builds/ }),
  new webpack.IgnorePlugin({ resourceRegExp: /worker-json-data-url/ }),
  new webpack.IgnorePlugin({ resourceRegExp: /^ajv/ }),
  new webpack.IgnorePlugin({ resourceRegExp: /^vanilla-picker/ })
],
optimization: {

+ 7 other calls in file

webpack.common.js

GitHub: AlexIvanov1809/vsts

206
207
208
209
210
211
212
213
214
215
    }
  ]
},
plugins: [
  new webpack.WatchIgnorePlugin({ paths: [/\.d\.ts$/] }), // ignore d.ts files in --watch mode
  new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }), // it adds force-ignoring unused parts of modules like moment/locale/*.js
  new webpack.DefinePlugin({
    // it adds custom Global definition to the project like BASE_URL for index.html
    'process.env': {
      NODE_ENV: JSON.stringify(mode),

+ 3 other calls in file

gulpfile.js

GitHub: Oskang09/jsoneditor

85
86
87
88
89
90
91
92
93
94
module: webpackConfigModule,
plugins: [
  bannerPlugin,
  new webpack.IgnorePlugin(/^ace-builds/),
  new webpack.IgnorePlugin(/worker-json-data-url/),
  new webpack.IgnorePlugin(/^ajv/),
  new webpack.IgnorePlugin(/^vanilla-picker/)
],
optimization: {
  // We no not want to minimize our code.

+ 7 other calls in file

webpack.common.js

GitHub: portainer/portainer

142
143
144
145
146
147
148
149
150
151
new MiniCssExtractPlugin({
  filename: '[name].[contenthash].css',
  chunkFilename: '[name].[id].css',
}),
new CleanWebpackPlugin(),
new IgnorePlugin({ resourceRegExp: /^.\/locale$/, contextRegExp: /moment$/ }),
// new BundleAnalyzerPlugin()
new LodashModuleReplacementPlugin({
  shorthands: true,
  collections: true,

468

webpack.js

GitHub: scope-demo/netlify-cms

33
34
35
36
37
38
39
40
41
42
  }),
});

const plugins = () => {
  return {
    ignoreEsprima: () => new webpack.IgnorePlugin(/^esprima$/, /js-yaml/),
    ignoreMomentOptionalDeps: () => new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    friendlyErrors: () => new FriendlyErrorsWebpackPlugin(),
  };
};

+ 3 other calls in file

Other functions in webpack

Sorted by popularity

webpack.ProvidePlugin is the most popular function in webpack (1161 examples)

Other popular packages:

Home

About