Questions tagged [webpack-splitchunks]

1

votes
1

answer
235

Views

Webpack 4 splitChunks and libraryTarget

I have some entries: app, vendor, polyfills, bootstrap and output as library ['app', '[name]'] and libraryTarget var. In the browser app variable contains: {bootstrap: Module, polyfills: Module, vendor: Module, app: Module} If I use optimization.splitChunks to move rxjs to bootstrap chunk app variab...
Alexey Savchuk
1

votes
1

answer
699

Views

Webpack-4 MiniCssExtractPlugin splitChunks

I'm trying to get the Webpack-4 splitChunks optimization to do this: Put all JS&CSS not in any entry point but used more than once into common files (CSS & JS). Combine all CSS produced by the MiniCssExtractPlugin from Vue components into the same common CSS file. I have this working (below), but th...
philw
1

votes
1

answer
0

Views

Create vendor.bundle for each entry with webapack 4

I want to make vendor.bundle for each entry with webapack4. example. src/ pages/ home/ index.js list/ index.js After building. dist/ pages/ home/ index.bundle.js home.vendor.bundle.js list/ index.bundle.js list.vendor.bundle.js How do I configure split chunks? Current config. const path = require('p...
kazaxy
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
5

votes
1

answer
51

Views

Webpack splitChunks plugin - why does setting a priority of a chunk make its initialisation asynchronous?

I have a problem understanding the behaviour of Webpack splitChunks plugin. What I'm working on is rewriting old scripts on existing site into components and using Webpack for bundling. The bundles are just JS, most is loaded at the end of the body. But one small script needs to be in the header of...
actimel
0

votes
0

answer
4

Views

How to create chunk which contains only code from it and replaces its entry bundle in webpack 4?

I'm moving from webpack 3 to webpack 4 and have some suddenness. I want to create a chunk which contains only code from it and replaces its entry bundle. How to do it with SplitChunksPlugin? My solution with CommonsChunkPlugin in webpack3 My entry point: entry: { ..., all: './src/all.js', ..., } Cre...
Roman Domoratskii
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
0

votes
0

answer
4

Views

Webpack 4 multiple entry point bundling issue

Hey everyone a little confused with webpack 4's bundling and hoping to get some advice from more experienced webpack users. I have an app that I am converting from gulp to webpack. I started off bundling everything into a single file then decided that multiple entry points would make more sense. Lo...
Galactic Ranger
4

votes
1

answer
226

Views

webpack split chunks put everything in one file

I have large application, and I want split it. Currently I have this structure: application.js < entry point Messages.js < application.js inner module SystemSetup.js < application.js inner module /node_modules/react.js < node modules Common.js < local file, used inside of Messages and SystemSetup Is...
degr
2

votes
1

answer
54

Views

How to know if Webpack's 4 splitChunks works?

I tried to add optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, To my webpack config file but when I compare the network when loading the pack in incognito, with and without that config, both are identical. Also running...
shinzou
2

votes
1

answer
43

Views

webpack split js files, get one more files

when I use webpack 4 to split js files, then i get the dist directory contains: app.js, vendor.js and one more js file names vendor~app.js, how and why it comes? Here are those files: and this is my webpack config: const path = require('path'); const CleanWebpackPlugin = require('clean-webpack-plug...
Y.zaig
9

votes
2

answer
520

Views

In webpack 4, how to only splitChunks on one entry?

I have two entries: page1.js, page2.js. I don't want to extract shared codes between two entries. I only want to extract node_modules used in page2.js. How do I achieve this in webpack 4? Thanks.
Chef