Home

Index

How to use the ContextReplacementPlugin function from webpack

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

webpack.ContextReplacementPlugin is a plugin used to replace the default context for a module to resolve dependencies with a custom one.

config.js

92
93
94
95
96
97
98
99
100
101
new MiniCssExtractPlugin({
  filename: `../css/[name].bundle${BUNDLE_PREFIX}.css`,
  chunkFilename: `../css/[name].chunk${BUNDLE_PREFIX}.css`,
  ignoreOrder: false, // Enable if there are warnings about conflicting order
}),
new webpack.ContextReplacementPlugin(
  /react-intl\/locale-data/,
  localesRegExp,
),
new webpack.ContextReplacementPlugin(

+ 3 other calls in file

app.webpack.config.js

GitHub: Akylas/oss-weather

470
471
472
473
474
475
476
477
478
        clearInterval: [require.resolve(coreModulesPackageName + '/timer/index.' + platform), 'clearInterval'],
        requestAnimationFrame: [require.resolve(coreModulesPackageName + '/animation-frame'), 'requestAnimationFrame'],
        cancelAnimationFrame: [require.resolve(coreModulesPackageName + '/animation-frame'), 'cancelAnimationFrame']
    })
);
config.plugins.push(new webpack.ContextReplacementPlugin(/dayjs[\/\\]locale$/, new RegExp(`(${supportedLocales.join('|')}).\js`)));

config.optimization.splitChunks.cacheGroups.defaultVendor.test = /[\\/](node_modules|ui-carto|ui-chart|NativeScript[\\/]dist[\\/]packages[\\/]core)[\\/]/;
config.plugins.push(new IgnoreNotFoundExportPlugin());

+ 2 other calls in file

How does webpack.ContextReplacementPlugin work?

webpack.ContextReplacementPlugin is a plugin that helps to reduce the amount of code that webpack includes in the final bundle by replacing the original module context with a new one. The new context includes only the required modules and reduces the size of the final bundle. This plugin can be especially useful in large codebases with complex dependencies.

webpack.config.js

GitHub: mlabs-haskell/seath

94
95
96
97
98
99
100
101
102
      inject: false, // See stackoverflow.com/a/38292765/3067181
    }),
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.ContextReplacementPlugin(/cardano-serialization-lib-browser/),
    new webpack.ContextReplacementPlugin(/cardano-serialization-lib-nodejs/),
  ],
};

+ 3 other calls in file

webpack.config.js

GitHub: miphik/easy-notes

44
45
46
47
48
49
50
51
52
53
    // both options are optional
    chunkFilename: '[id].[hash].css',
    filename: 'css/[name]-[hash:8].css',
}));*/
common.plugins.push(new LodashModuleReplacementPlugin());
common.plugins.push(new webpack.ContextReplacementPlugin(
    // The path to directory which should be handled by this plugin
    /moment[\/\\]locale$/,
    // A regular expression matching files that should be included
    /en|ru/,

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const webpack = require("webpack");

const options = {
  // Replace all `require('package-name')` with `require('new-package-name')`
  // in any code in `node_modules` or `src` directory
  newContentResource: /package-name/,
  newContentRecursive: /node_modules|src/,
};

module.exports = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      /package-name/,
      options.newContentResource,
      options.newContentRecursive
    ),
  ],
};

In this example, we're replacing any instances of the string "package-name" in the source code with "new-package-name" using ContextReplacementPlugin. This allows us to customize the behavior of any packages that we're using without having to modify their source code directly.

webpack.config.js

GitHub: piyushunicommerce/redash

83
84
85
86
87
88
89
90
91
92
  }
},
plugins: [
  new WebpackBuildNotifierPlugin({ title: "Redash" }),
  // bundle only default `moment` locale (`en`)
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
  new HtmlWebpackPlugin({
    template: "./client/app/index.html",
    filename: "index.html",
    excludeChunks: ["server"],

+ 3 other calls in file

webpack.mix.js

GitHub: kolyayurev/adminpanel

7
8
9
10
11
12
13
14
15
16
    '@': path.join(__dirname, 'resources/js'),
})
 // Настройка webpack
.webpackConfig({
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ru)$/),
        new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/ru-RU')
    ]
})
.options({ processCssUrls: false })

+ 3 other calls in file

webpack.config.js

GitHub: olafsnow45/flagscan

161
162
163
164
165
166
167
168
169
170
    patterns: [
      { from: 'static/', to: '../' }
    ]
  }
),
new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.DefinePlugin({
  'process.env.MIXPANEL_TOKEN': JSON.stringify(process.env.MIXPANEL_TOKEN),
  'process.env.MIXPANEL_URL': JSON.stringify(process.env.MIXPANEL_URL),
  'process.env.AMPLITUDE_API_KEY': JSON.stringify(process.env.AMPLITUDE_API_KEY),

+ 2 other calls in file

webpack.config.js

GitHub: CJ-Rose/trustlist

105
106
107
108
109
110
111
112
113
114
            : {}),
    }),
    new webpack.ProvidePlugin({
        Buffer: path.resolve(__dirname, 'externals', 'buffer.js'),
    }),
    new webpack.ContextReplacementPlugin(/\/maci\-crypto\//, (data) => {
        delete data.dependencies[0].critical
        return data
    }),
],

+ 3 other calls in file

webpack.common.js

GitHub: bippeishan/low-code

251
252
253
254
255
256
257
258
259
260
    filename: "[name].[hash:6].css",
    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",

webpack.config.js

GitHub: nsherred/porg

140
141
142
143
144
145
146
147
148
149
}),
new CleanWebpackPlugin(),

// filter out moment locales
// see https://webpack.js.org/plugins/context-replacement-plugin/
new webpack.ContextReplacementPlugin(/moment[/\\]locale/, /en\.js/),

// https://github.com/webpack-contrib/mini-css-extract-plugin
new MiniCssExtractPlugin({
  filename: '[name]/index.[hash].css',

vue.config.js

GitHub: lixue520/xiaozupj_final

52
53
54
55
56
57
58
59
60
61
    })
    // 结束
    .end()
config
    .plugin('ignore')
    .use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/))
config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/icons'))

Other functions in webpack

Sorted by popularity

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

Other popular packages:

Home

About