CommonsChunkPlugin is a webpack plugin that helps you bundle common code among your modules into separate bundles.
Questions tagged [commonschunkplugin]
72 questions
84
votes
1 answer
Can someone explain Webpack's CommonsChunkPlugin
I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if there are common packages/dependencies between them and separates them into their own bundle.
So, let's assume I have the following…
Dimitris Karagiannis
- 8,942
- 8
- 38
- 63
55
votes
4 answers
Webpack 4 migration CommonsChunkPlugin
I need help migrating the following code from webpack 3 to 4.
new webpack.optimize.CommonsChunkPlugin({
minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
name: "vendor",
chunks: ["main"]
})
I have two…
Erik Bender
- 755
- 1
- 6
- 13
17
votes
2 answers
(Webpack) How to chunk dynamic module dependencies
I just realized that if you load modules dynamically using require.ensure(), webpack will not analyze and chunk dependencies together. This makes sense in some way that one could argue, that webpack can't know if such modules are transferred ever,…
jAndy
- 231,737
- 57
- 305
- 359
12
votes
2 answers
Webpack 4 - Migrating from CommonsChunkPlugin to SplitChunksPlugin
We have a traditional server rendered application (non SPA) where each page is augmented with vuejs
Our existing webpack 3 configuration is
webpack.config.js
var webpack = require('webpack')
var path = require('path')
const ExtractTextPlugin =…
kimsagro
- 15,513
- 17
- 54
- 69
10
votes
2 answers
Extract duplicate javascript code using WebPack CommonsChunkPlugin
I'm using WebPack CommonsChunkPlugin to extract duplicate code and reduce JavaScript code size. I have two html pages and two entries for them. Also i've added ReactJs vendor entry. So far, in webpack.config.js we have:
var path =…
Mehran Torki
- 977
- 1
- 9
- 37
8
votes
1 answer
Webpack: extract common modules from entry and child chunks to separate commons chunk
I have an application built with webpack that uses code splitting. I now want to aggregate all common modules that match specific criteria (in this case node_modules) across all entry chunks and all child chunks (generated via code splitting) into a…
Oliver Joseph Ash
- 3,138
- 2
- 27
- 47
8
votes
1 answer
Split vendor libraries into multiple chunks with webpack
I'd like to split my vendor code into two chunks, one that contains all angular libraries, and another that contains everything else.
My angular app has a single entry point and is setup something like:
entry: {
app: './path_to/app.js',
…
Nick
- 2,913
- 12
- 40
- 52
8
votes
3 answers
webpackJsonp is not defined: webpack-dev-server and CommonsChunkPlugin
This is my webpack.config.js file:
const webpack = require('webpack');
const path = require('path');
module.exports = {
cache: true,
devtool: 'source-map',
entry: {
app : [
'./src/index.js'
],
vendor: ['lodash']
},
…
Amit Kaspi
- 835
- 2
- 10
- 19
7
votes
1 answer
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
I am getting this error
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
new webpack.optimize.CommonsChunkPlugin({
filename: DEBUG ? 'bundle.js' : 'bundle.min.js',
name:…
Mohit Prakash
- 492
- 2
- 7
- 15
7
votes
0 answers
Apply CommonsChunkPlugin on different config exports in Webpack?
I am working on a project which is consisting of the following 'entities':
A few pages for a static website
An app
An admin dashboard
In my initial webpack.config a setup I was handling each of these entities as different entry points. For…
Dimitris Karagiannis
- 8,942
- 8
- 38
- 63
6
votes
2 answers
Webpack implicit vendor/manifest chunks in IE11 - Promise is undefined
Short version
When I run my application in IE11, I get an error saying Promise is undefined from within the manifest.js file.
How do I add babel-polyfill or similar such that it runs before the manifest is executed?
Long version
I am trying to add…
Matt Wilson
- 8,159
- 8
- 33
- 55
6
votes
1 answer
What does "children" refer to in CommonsChunkPlugin config
I'm trying to wrap my head around the configuration options for webpack's CommonsChunkPlugin. These options include a boolean children property. Could you explain what happens when this is set to true, vs. when it's set to false? This documentation…
Bryan
- 432
- 5
- 13
5
votes
0 answers
Webpack 4.4.1 : performance issues with splitChunks
I'm working on an old project with a lot of code. This project uses Webpack 3.8.1 and I'm trying to update to 4.4.1, and it's a real obstacle course!
The main pain is that the projects uses the CommonsChunkPlugin:
new CommonsChunkPlugin({
name:…
KorHosik
- 1,225
- 4
- 14
- 24
4
votes
1 answer
Webpack - separate bundle for worker importScripts
To use importScripts to load worker-specific bundle in web worker I need
to tell Webpack to put all Webpack's client side specific code to that worker bundle (webpackJsonp, _webpack_require__, etc.).
Here's entry bundle config:
entry: {
app: [
…
setec
- 15,506
- 3
- 36
- 51
4
votes
0 answers
Webpack generate async loadable, splitted and cachable common code
I'm building a multi-page application and am using webpack to bundle my client javascript.
I've got the following :
webpack.config.js
module.exports = {
entry: {
page1: [
'@babel/polyfill',
'whatwg-fetch',
…
Cyril CHAPON
- 3,556
- 4
- 22
- 40