Skip to content

Instantly share code, notes, and snippets.

@gaearon
Created January 4, 2018 21:02
Show Gist options
  • Save gaearon/ca6e803f5c604d37468b0091d9959269 to your computer and use it in GitHub Desktop.
Save gaearon/ca6e803f5c604d37468b0091d9959269 to your computer and use it in GitHub Desktop.
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/'
}
};
@jovanliuc
Copy link

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

@titanve
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.

Thanks!

@maulerjan
Copy link

maulerjan commented Jan 9, 2019

If concerned about browser caching of bundles:

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

@niteeshb7
Copy link

Thank you

@Bubbfish
Copy link

Bubbfish commented Dec 6, 2019

thanks

@jvkiran
Copy link

jvkiran commented Jan 24, 2020

Thanks

@jobyjoseph
Copy link

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?

@obedparla
Copy link

@xgqfrms
Copy link

xgqfrms commented Oct 15, 2020

code splitting & dynamic import

chunkFilename

@mienaikoe
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)

@mrdulin
Copy link

mrdulin commented Aug 31, 2021

React 16.14.0 + Webpack v5, React Lazy kick-off example : https://github.com/mrdulin/react-examples/tree/main/v16

@bobber205
Copy link

@mrdulin Getting a 404 on your link

@mrdulin
Copy link

mrdulin commented Nov 23, 2021

@bobber205 Fixed

@hossein-ahmadi-021
Copy link

wtf is this.

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