Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Webpack code splitting configuration example
module.exports = {
entry: {
main: './src/app.js',
output: {
// `filename` provides a template for naming your bundles (remember to use `[name]`)
filename: '[name].bundle.js',
// `chunkFilename` provides a template for naming code-split bundles (optional)
chunkFilename: '[name].bundle.js',
// `path` is the folder where Webpack will place your bundles
path: './dist',
// `publicPath` is where Webpack will load your bundles from (optional)
publicPath: 'dist/'
Copy link

jovanliuc commented Jan 30, 2018

and just kick-off of an extremely simple webpack-config demo.

Copy link

titanve commented Dec 11, 2018

Hello Dan!

Do you have a reactjs example for code splitting with webpack 4 ?

I've tried so many things I've found online but I cannot get webpack to split my code.


Copy link

maulerjan commented Jan 9, 2019

If concerned about browser caching of bundles:

   filename: '[contenthash].bundle.js',
   chunkFilename: '[contenthash].bundle.js'

Copy link

niteeshb7 commented May 6, 2019

Thank you

Copy link

Bubbfish commented Dec 6, 2019


Copy link

jvkiran commented Jan 24, 2020


Copy link

jobyjoseph commented May 25, 2020

Thank you. my [name] is coming as 1, 0 ... as chunk name. I am using import(). can we have specific names for the chunk file names?

Copy link

obedparla commented May 28, 2020

Copy link

xgqfrms commented Oct 15, 2020

code splitting & dynamic import


Copy link

mienaikoe commented May 2, 2021

Great starting off point for code-splitting!

If I could make an addendum from trying what you used, the publicPath is what webpack in the browser will use. I was getting a confusing base path added at the beginning until I realized I had put a local path into publicPath based on what I interpreted from line 12 (instead of a browser relative path)

Copy link

mrdulin commented Aug 31, 2021

React 16.14.0 + Webpack v5, React Lazy kick-off example :

Copy link

bobber205 commented Nov 22, 2021

@mrdulin Getting a 404 on your link

Copy link

mrdulin commented Nov 23, 2021

@bobber205 Fixed

Copy link

hossein-ahmadi-021 commented Nov 30, 2021

wtf is this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment