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.
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'],
+ 3 other calls in file
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)) {
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.
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({
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.
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
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: [
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"
GitHub: zachdaniel/jsoneditor
![zachdaniel profile picture](/zachdaniel.png?size=40)
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
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
GitHub: Oskang09/jsoneditor
![Oskang09 profile picture](/Oskang09.png?size=40)
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
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,
GitHub: scope-demo/netlify-cms
![scope-demo profile picture](/scope-demo.png?size=40)
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
webpack.ProvidePlugin is the most popular function in webpack (1161 examples)