Here is the output from bundle-analyzer:

As you can see packages as react-dom, jquery and mobx are both in shell bundle and vendor bundle. Is it possible to put them only in vendor bundle?

UPDATE Here is config file:

entry: {
    shell: './src/shell.ts',
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-ponents',
    ],
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name]bundle.js?[hash:8]',
    publicPath: '/',
  },
  devtool: PROD ? false : 'source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'],
    modules: ['node_modules'],
  },
  optimization: {
    minimize: !!PROD,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new ExtractTextPlugin('[name].css?[hash:8]', {
      allChunks: true,
      disable: !PROD,
    }),
    new HtmlWebpackPlugin({
      chunksSortMode: 'dependency',
      template: './src/index.tpl.html',
    }),
    new BundleAnalyzerPlugin(),
  ],
  

Here is the output from bundle-analyzer:

As you can see packages as react-dom, jquery and mobx are both in shell bundle and vendor bundle. Is it possible to put them only in vendor bundle?

UPDATE Here is config file:

entry: {
    shell: './src/shell.ts',
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-ponents',
    ],
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name]bundle.js?[hash:8]',
    publicPath: '/',
  },
  devtool: PROD ? false : 'source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'],
    modules: ['node_modules'],
  },
  optimization: {
    minimize: !!PROD,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new ExtractTextPlugin('[name].css?[hash:8]', {
      allChunks: true,
      disable: !PROD,
    }),
    new HtmlWebpackPlugin({
      chunksSortMode: 'dependency',
      template: './src/index.tpl.html',
    }),
    new BundleAnalyzerPlugin(),
  ],
  

• javascript
• reactjs
• webpack

• Can you show your webpack config file. – dhruw lalan Commented Nov 26, 2020 at 14:59
• Sure, I updated my question. (I didn't include "module" object) – stahlhammer Commented Nov 26, 2020 at 15:09

2 Answers 2

You can split all your vendor code ming from the node_modules folder into a single vender bundle file using splitChunks optimization webpack setting.

Firstly, remove vendor form your entry.

Then, add the below code to your config file:

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/ ,
                name: 'vendor' ,
                chunks: 'all' ,
                enforce: true ,
            }
        }
    }
}

You're manually splitting code using entry which has some pitfalls, e.g.:

If there are any duplicated modules between entry chunks they will be included in both bundles.

You can prevent it either with Entry dependencies or SplitChunksPlugin .

Here's an example for Entry dependencies:

entry: {
    shell: {import: './src/shell.ts', dependOn: 'vendor'},
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-ponents',
    ],
  },

Since you're going to use both entrypoints in a same HTML page, remember to enable optimization.runtimeChunk: 'single'.

There're detail explanations on code splitting guide for webpack, you can read over there too.