Webpack 4 and code splitting

Question

I was using CommonsChunkplugin to split my codes.Now I'm trying to migrate my project to webpack 4.

Here is the old config code:

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

new webpack.HashedModuleIdsPlugin({
            // Options...
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
})

And here is the webpack 4 config code:

entry: {
        main: './src/app.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial"
                }
            }
        }
    },

The new config code takes all the code from node modules which is used in the project. But I want only the vendor libraries(which I define at the enrtry config part)to be split.Not all code from node_modules.

In this case: 'babel-polyfill','react','react-dom',"jquery","bootstrap"

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

And my other questions:

2) Do I need HashedModuleIdsPlugin anymore?

3) Do I need to split runtime code?

Tomasz Mularczyk · Answer 1 · 2018-04-09T16:12:55.213

I actually asked very similiar question.

Here is how to create vendor bundle for only required packages:

// mode: "development || "production",
entry: {
  vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
  main: './client.js',
},
output: {
  path: path.join(__dirname, '../dist'),
  filename: '[name].[chunkhash:8].bundle.js',
  chunkFilename: '[name].[chunkhash:8].bundle.js',
  publicPath: '/',
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: 'vendor',
        enforce: true
      },
    }
  },
  runtimeChunk: true
}

You don't need HashedModuleIdsPlugin runtime chunk will be automatically generated.

jerry_p · Answer 2 · 2018-06-25T14:56:20.080

You don't need to do anything in webpack 4 code splitting. Use dynamic import and it'll do for you.

const initProject = async () => {
  const React = await import('react')
  const ReactDOM = await import('react-dom')
  const { Provider } = await import('react-redux')
  const { ConnectedRouter } = await import('react-router-redux')
  const { store, history } = await import('./redux/configureStore')

  await import('semantic-ui-css/semantic.min.css')
  await import('./replace-semantic.css')
  await import('./i18n')

  const App = await import('./App')

  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App.default />
      </ConnectedRouter>
    </Provider>,
    document.getElementById('app'),
  )
}

initProject()

Here's my react-startkit please take a look.

Webpack 4 and code splitting

2 Answers2