Webpack code splitting configuration example

webpack.config.js

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/'
  }
};

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

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!

If concerned about browser caching of bundles:

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

Thank you

thanks

Thanks

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?

You can use webpackChunkName: https://webpack.js.org/api/module-methods/#magic-comments

code splitting & dynamic import

chunkFilename

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)

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