Stack Overflow
Stack Overflow

Questions tagged [splitchunksplugin]

26 questions
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
6
votes
0 answers

How can I get the vendors chunk names of an async chunk with Webpack?

Let's say I have 3 async chunks that were created by dynamic imports: const Notes = lazy(() => import(/* webpackChunkName: "notes" */ 'pages/Notes')) const Lists = lazy(() => import(/* webpackChunkName: "lists" */ 'pages/Lists')) const Files =…
Almog Gabay
  • 91
  • 1
  • 3
6
votes
0 answers

Webpack SplitChunksPlugin - exclude one entry point entirely

I am using SplitChunksPlugin with Webpack 4 through Rails + Webpacker. I have an app that I want to split into chunks - except for one entry point which is for the public that I want to be a self contained, single file. When I was previously using…
koosa
  • 2,966
  • 3
  • 31
  • 46
6
votes
0 answers

Webpack splitChunks how to get a chunk for each npm package (the chunk should include the dependencies for each package)

I want to split my chunks with Webpack the following way: Whenever I import an NPM package, like import styled from "styled-components"; I want a chunk like: styled-components.[contenthash:5].js // INCLUDING ITS DEPENDENCIES Here is the config…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
6
votes
1 answer

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…
actimel
  • 442
  • 6
  • 22
6
votes
1 answer

How to split dynamically by directories with Webpack/SplitChunks plugin?

I'm trying to split my React code (created with create-react-app) with the splitChunks plugin in the following way : I have following components (JSX) structure…
Przemek Dabrowski
  • 61
  • 4
4
votes
1 answer

SplitChunksPlugin not generating chunk for dependencies shared among entry points

I'm trying to use code splitting so I can unit-test production code without duplicating modules. I would like webpack to recognize that my *.test.ts files rely on the same modules as the source code itself, and output a bundle containing those…
Jordan
  • 81
  • 5
4
votes
1 answer

Any Webpack splitchunks.name as a function documentation other than from the website?

with the introduction of webpack 4, splitChunks.name is used to define the name of a split chunk. here, the documentation says the key can be mapped to a function for custom…
nsun
  • 159
  • 2
  • 8
3
votes
0 answers

Webpack 5 splitChunks configuration

I want to export testD file into 2 seperate files. One file which is called immediately and the other which is called async. From my webpack configuration, my settings are such that allow testD to be splitted into 2 files. But from the picture below…
Nick
  • 2,818
  • 5
  • 42
  • 60
3
votes
0 answers

Webpack-4 How to make independent and conditional splitChunks with multiple entries and SSR

I want to make multiple chunks from a certain bundle and use it conditionally rendered by server. The logic for put or not certain script inside the html is controlled by another app, is not a problem. I try Loadable Components, but do not works for…
Àngel Solé
  • 31
  • 3
3
votes
1 answer

Webpack v4 creating tiny chunks (by route)

This is some of the code I'm using in my React app. My routes are written using react-router-config which allows me to keep a centralized way so I know where to go always in order to modify or add some. const routes = [ { component: Root, …
rmartrenado
  • 1,516
  • 1
  • 18
  • 42
3
votes
1 answer

How to get webpack4 chunkhash value to use in script src inside the html automatically?

How can I get the chunkhash value generated by webpack4 so that I can use it inside my index.html to set properly the script src? Brief context: Hope it not to be a stupid question because I am completely newcomer in webpack, started to learn today.…
sdlins
  • 2,195
  • 1
  • 23
  • 31
3
votes
1 answer

webpack publicPath - Use different urls to reuse bundles

Given the following scenario. A webpack build producing 3 bundles, and a CI publishing them to a CDN like this (every build id produces a new folder): www.cdn.com/1/application.js www.cdn.com/1/chunk-a.js www.cdn.com/1/chunk-b.js now, consider that…
Hitmands
  • 13,491
  • 4
  • 34
  • 69
3
votes
2 answers

How to have multiple chunks but a single js file that loads them

I'm trying to setup Webpack, currently not using dev-server and my app is being served by a python backend which has the index.html. I'm trying to use the SplitChunksPlugin so that I can have multiple chunks (app, vendor, runtime, etc). However, to…
donzul
  • 405
  • 1
  • 4
  • 13
3
votes
0 answers

MiniCssExtractPlugin + SplitChunksPlugin doesn't put scoped css into bundle

I'm using a Webpack 4 setup, where I'm trying to get all my css into a single bundle, including my scoped css from .vue files. I'm using MiniCssExtractPlugin to extract the css from the files and SplitChunksPlugin to bundle all the css into a single…
Kris D. J.
  • 612
  • 2
  • 7
  • 16
1
2