Questions tagged [commonschunkplugin]

1

votes
0

answer
73

Views

Migrating 2 CommonsChunksPlugin to Webpack 4's splitChunks

I have these settings in a Webpack 2.x config file and I'm migrating to Webpack 4. I know CommonsChunkPlugin is deprecated and I should use optimization.splitChunks, but I couldn't find anywhere in the docs on how to convert two CommonsChunkPlugin instances. new webpack.optimize.CommonsChunkPlugin({...
Siraj Kakeh
1

votes
1

answer
64

Views

How to prevent commonsChunkPlugin from injecting the chunks into html

I am using preload-webpack-plugin along with the commonschunkplugin for webpack. My webpack version is 3. Now the issue is that using the preloadplugin, I am already prefetching the async routes in my vue application. But since commonschunkplugin is also used, after page load, it also injects tags l...
Agniva De Sarker
1

votes
1

answer
2k

Views

webpack duplicate code in multi chunks and sooooo big common chunk file

duplicate code in multi chunks or sooooo big common chunk file Suppose I have a SPA website. And I have a file main.js in which I config the route. ```js define(function(){ // suppose I define route here route.when('#/aaa', function(){ // a code split point require([ 'services/A', 'style/a', 'module...
Wyntau
1

votes
1

answer
472

Views

Webpack & TypeScript CommonsChunkPlugin not working

I've followed a few guides to setting up CommonsChunkPlugin but it doesn't seem to be working. I've also searched and read the other posts on here but with no luck. I have three files (TypeScript) which are importing a few of the same libraries (fancybox, moment and pikaday). They are being imported...
descendent
1

votes
1

answer
613

Views

Webpack 2 - Suppress chunk files

As we are putting this output on a load balancer (not using sticky), we need to place the output of these files without chunks (neither hashes). These are the main two files for webpack configuration. webpack.common.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpa...
oscar.fimbres
1

votes
1

answer
30

Views

How to combine all code-splitted modules into a single file?

I've got an SPA for which I want to split the non-critical code and load it asynchronously right after the critical file is being loaded, but as a single file. To this end, I'm utilizing import('./module-name') as code-splitting points. Problem is, in the resulting output, I've got multiple files: I...
Birowsky
1

votes
1

answer
402

Views

Webpack 4 - What is the splitChunks equivalent to minChunk: Infinity

In webpack 3, we used to be able to have a dependency, and all of it's dependencies grouped together in a 'common chunk' by using: new webpack.optimize.CommonsChunkPlugin({ name: 'common-init', minChunks: Infinity }) In Webpack 4, you need to use splitChunks. However, everything now is based on the...
jms
1

votes
1

answer
140

Views

Webpack multiple chunks include same dependency

I want to have some dependencies in different chunks so client.js would be smaller. webpack 4.16.5 Why I get same code included to several chunks? What's missing? const path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlW...
Lukas
1

votes
1

answer
2.9k

Views

Webpack 4 splitchunks, how to force common chunks?

I'm trying to split a project into commons chunks, it'was easy with the old commonChunks plugin because the project is designed to be splitted into kinds of libraries... With the new splitChunks i cannot achieve the same result. So i came back to a basic test to try to understand the new splitChunks...
Coolhand
1

votes
1

answer
860

Views

How to use one vendor chunk file (webpack) for multiple react projects

I have different gits with different react applications. Where every application should use the same vendors chunk file with external packages (React, ReactDOM ...) Projects setup: Project 1 (git) /dist/... /src/... webpack.config.js Project 2 (git) /dist/... /src/... webpack.config.js Project N (gi...
Martin
0

votes
0

answer
3

Views

Migrating from webpack 2 to webpack 4

I'm trying to migrate a project I'm working on from webpack 2.4.1 to the most recent version 4.29.3. (A much needed upgrade, I know) I think I have converted everything correctly, from replacing extract-text-webpack-plugin to mini-css-extract-plugin, etc. The problem occured when I tried to replace...
RandomStranger
17

votes
2

answer
1.6k

Views

(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, but can we force webpack to do the job anyway? Examp...
jAndy
5

votes
1

answer
1.3k

Views

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 says 'If true all children of the commons chunk are...
Bryan
1

votes
1

answer
313

Views

Is there a way to load react library files separately and not in the bundled files when using react with babel, webpack and gulp as building tool?

I have an application where I have to build code using babel and react. The application will be built using gulp and webpack for automated build creation and deployment. When using gulp and webpack to convert babel+react code to browser interpretable code, we need to install react using npm and has...
Aabhas Arora
6

votes
2

answer
1.7k

Views

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 CommonsChunkPlugin to my webpack config in order to...
Matt Wilson
3

votes
0

answer
111

Views

How minChunks in CommonsChunkPlugin affect the custom css style rendering?

React CSS style is rendering later than custom CSS style, which is somehow dependent on minChunks. new webpack.optimize.CommonsChunkPlugin({ name: 'common', minChunks: function(module, count) { return !couldThisGoToCommonBundle(module) && count >= 5; } }), new webpack.optimize.CommonsChunkPlugin({ n...
Ashutosh Ranjan
7

votes
0

answer
226

Views

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 setup I was handling each of these entities as different entry points. For example I would have something like entry: { vendor: [ 'jquer...
Dimitris Karagiannis
3

votes
1

answer
760

Views

Webpack - React Router V4 - code splitting duplicate modules in async chunks

The main problem is while code splitting with react-routerV4 and then webpack 2, I have modules that are in several chunks that I can't get to the main one. My configuration is as follow : Webpack 2.2.1 React-route 4.1.1 I'm using the code splitting as in the react-router v4 documentation Basically...
2

votes
0

answer
563

Views

Webpack missing modules with CommonsChunk and extract-text-webpack-plugin

I'm following Maxime Fabre's tutorial on Webpack and am trying to get a really simple webpack bundle with 1 entry point and 2 chunks to work. Since both chunks require jquery and mustache, I'm using CommonsChunkPlugin to move the common dependencies up to the main bundle file, just like in the tutor...
CoconutFred
2

votes
1

answer
406

Views

Split “vendor” chunk using webpack 2

I have code splitting config similar to official docs and everything works perfect - all my node modules are in 'vendor' chunk (including 'babel-polyfill'). But now I need to move babel-polyfill and all it's dependecies to separate chunk ('polyfills') to be able to load it before my vendor bundle. A...
Egor Komarov
2

votes
1

answer
523

Views

Serviceworker Chunk with CommonsChunkPlugin doesn't work, webpackJsonp is not defined

I'm trying to create a serviceworker chunk (sw.js) with webpack2 using the CommonsChunkPlugin but when trying to register /sw.js as a serviceworker I get the error Uncaught ReferenceError: webpackJsonp is not defined. Apparently webpackJsonp is for async loading of chunks and is messing up my servi...
raphi011
7

votes
2

answer
763

Views

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 = require('path'); var webpack = require('webpack'); var BundleTracker...
Mehran Torki
8

votes
1

answer
2.5k

Views

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', vendor: ['jquery', 'moment', 'numeral'], 'vendor.angular': ['an...
Nick
8

votes
1

answer
389

Views

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 single separate commons chunk. If I do this: new w...
Oliver Joseph Ash
24

votes
3

answer
17.1k

Views

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 entry files and want only the dependencies of the first one to...
Erik Bender
2

votes
0

answer
284

Views

How can I import dynamically scripts without bundle them together?

I'm trying to dynamically import a script with webpack's magic comments ( using commons chunk plugin ) depending on the some user action. I've tried this ( lets say that the user's action would load the 'a' script ): const paths = { a: './commons/a', b: './commons/b', c: 'commons/c' }; const x = 'a'...
2

votes
1

answer
607

Views

CSS not extracted for common chunk with extract-text-webpack-plugin

Not sure if this is a bug or just my setup, I am using the CommonsChunkPlugin to get a separate common.js for three entry points in my project, and using the extract-text-webpack-plugin to get the css files. My entry points are app, login and register. I am able to get: app.js app.vendor.js login.js...
JerryH
1

votes
2

answer
707

Views

Webpack 2: splitting libraries, vendor and app into different files

Imagine I have a rich application, which uses a lot of the 3rd party modules including lodash, moment, axios, react. If I bundle everything in one bundle at the end the size would be higher then 1MB. I want webpack to pack my libraries in the way, that it stores: lodash separately moment separately...
Pavel Polyakov
2

votes
2

answer
1.6k

Views

Webpack 4 and code splitting

I was using CommonsChunkplugin to split my codes.Now I'm trying to migrate my project to webpack 4. Here is the old config code: entry: { main: './src/app.js', vendor: ['babel-polyfill','react','react-dom','jquery','bootstrap'] }, new webpack.HashedModuleIdsPlugin({ // Options... }), new webpack.opt...
javauser35
76

votes
1

answer
7.9k

Views

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 configuration: ... enrty : { entry1 : 'entry1.js', //which has 'jquer...
Dimitris Karagiannis
3

votes
1

answer
1.4k

Views

Extract common styles with ExtractTextPlugin and CommonsChunkPlugin

I'm trying to extract common chunk from my css according wiki section. I know that this docs is for webpack 1 but for webpack 2 seems like there is no corresponding example yet. I use the following webpack config: module.exports = { context: srcPath, entry: { foo: './css/pages/foo.css', bar: './css/...
user1636505
2

votes
1

answer
1.4k

Views

Webpack and CommonsChunkPlugin, separating node_modules out for each async chunk

I have successfully got Webpack and the CommonsChunkPlugin to split my code in two - one bundle with my codebase, and one with everything imported from node_modules. That was the relatively easy bit. The next thing I'm trying to achieve in my app is to dynamically import a 'sub-app', which has quite...
Gav
3

votes
1

answer
2.4k

Views

Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'

I'm trying to migrate from webpack 3 to webpack 4. The issue I have is with CommonsChunkPlugin, when I try to run webpack (npm run webpack-dev-server -- --config config/webpack.dev.js), I have the following error: module.js:529 throw err; ^ Error: Cannot find module 'webpack/lib/optimize/CommonsChun...
Tonio
2

votes
0

answer
369

Views

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: 'common', minChunks: 3, chunks: _.without(_.keys(entry)...
KorHosik
2

votes
0

answer
85

Views

How to make multiple page webpack build with 3 entry point without repetion of config code?

I need to create a multiple web app with 10 pages and 3 entry point. Do I should create 11 HtmlWebpackPlugin and write chunks what I want to use in every HTML files. My file tree: In result, I want to see something like that: The version of webpack - 4.5.0 I am also interested in how to work with we...
Maxim Soltyk
8

votes
3

answer
11k

Views

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'] }, output: { filename: 'bundle.js', path: path.join(__dirname, 'dist'), publicPath: '/di...
Amit Kaspi
2

votes
0

answer
33

Views

Exclude entry from webpack CommonsChunkPlugin

I have a multi-page website. Each page has its own entry point. I am using the CommonsChunkPlugin to extract shared libraries into a common js file that is included on all of my pages. I have one page that is different. This page runs some JavaScript and immediately redirects to another page. I want...
Brian Ball
2

votes
1

answer
86

Views

Webpack: How to migrate CommonsChunkPlugin (wp3) to optimization.splitChunks (wp4)?

I'm trying to migrate to webpack4 from 3 and I'm having a really hard time migrating CommonsChunkPlugin. On WP3, I have the following simplified configuration: const entries = { client: './src/index.js', common1: ['lodash'], common2: ['react', 'react-dom'] }; module.exports = { ... entry: entries, p...
fabiomcosta
2

votes
1

answer
239

Views

What does 'Chunks' mean in CLI output?

Command I run: $ webpack --config webpack.config.js -p --progress This is the result I get. What do chunks mean? Why do they change sometimes? If I understand it right, the more chunks the better. But I can't see same amount of files. If I have 0-1-2 chunks in every entry point, where are chunks' f...
Green
2

votes
1

answer
954

Views

webpack2 CommonsChunkPlugin with manifest file, only generates the last file in the “names[]” array if minChunks is a function

webpack version 2.2.1 I'm trying to add an additional manifest file in order to bypass webpacks runtime code injection issue and enable caching: https://webpack.js.org/guides/code-splitting-libraries/#manifest-file however, when passing a function into minChunks, in this case - in order to automatic...
silicakes

View additional questions