title: Code splitting not happening via React lazy import ,and Webpack
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//webpack dev
  const common = require("./webpack.common");
  const merge = require("webpack-merge");
  const globImporter = require('node-sass-glob-importer');
  
  module.exports = merge(common, {
      mode: "development",
    
      module: {
  
          rules: [
              {
                  test: /\.(sa|sc|c)ss$/,
                  use: [
                      { loader: 'style-loader' },
                      { loader: 'css-loader' },
                      {
                          loader: 'postcss-loader',
                          options: {
                              plugins: () =&gt; [require('autoprefixer')({
                                  'overrideBrowserslist': ['&gt; 1%', 'last 2 versions']
                              })],
                          }
                      },
                      {
                          loader: 'sass-loader', options: {
                              sassOptions: {
                                  importer: globImporter()
                              }
                          }
                      }]
              },
          ]
      },
      devServer: {
          // contentBase: path.join(__dirname, 'dist'),
          historyApiFallback: true,
          port: 8081
      }
      
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//webpack prod
  const common = require("./webpack.common");
  const path = require("path");
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const merge = require("webpack-merge");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = merge(common, {
      mode: "production",
      output: {
          filename: "main.[contenthash].js",
          path: path.resolve(__dirname, "dist")
      },
      module: {
          rules: [
              {
                  test: /\.(sa|sc|c)ss$/,
                  use: [
                      { loader:  MiniCssExtractPlugin.loader },
                      { loader: 'css-loader' },
                      {
                          loader: 'postcss-loader',
                          options: {
                              plugins: () =&gt; [require('autoprefixer')({
                                  'overrideBrowserslist': ['&gt; 1%', 'last 2 versions']
                              })],
                          }
                      },
                      {
                          loader: 'sass-loader', options: {
                              sassOptions: {
                                  importer: globImporter()
                              }
                          }
                      }]
                  }
          ]
      },
      plugins: [new MiniCssExtractPlugin({
          filename: "./src/css/[name].[contentHash].css"
      },
      ), new CleanWebpackPlugin()]
  
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// webpack common
  const HTMLWebpackPlugin = require('html-webpack-plugin');
  
  module.exports={
      entry:"./src/index.tsx",
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: [".ts", ".tsx",".js", ".jsx"]
      },
      module:{
          rules:[
              {
                  test: /\.ts(x?)$/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: "ts-loader"
                      }
                  ]
              },
            
              {
                  test:/\html$/,
                  use:["html-loader"]
              },
              {
                  test:/\.(svg|png|jpe?g|gif)$/i,
                  use:{
                      loader:"file-loader",
                      options:{
                          name:"[name].[hash].[ext]",
                          outputPath:"images"
                      }
                  }
              }
          ]   
      },
      // externals: {
      //     "react": "React",
      //     "react-dom": "ReactDOM"
      // },
      plugins:[new HTMLWebpackPlugin({
          template:"./src/index.html"
      })]    
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Code splitting not happening via React lazy import ,and Webpack</p>
  
  <p>I want to do code splitting with React Suspense and Lazy imports , I don't know what is missing because separate chunk is not getting created for my dynamically import component </p>
  
  <p>Please anyone help I am using webpack 4 and React version 16.9</p>
  
  <p>Getting below message warning console</p>
  
  <hr>
  
  <p>WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). 
  This can impact web performance.
  Entrypoints:
    main (533 KiB)
        ./src/css/main.000e3971ce67d214e0d7.css
        main.5877aa0d0c3e45fb034f.js</p>
  
  <p>WARNING in webpack performance recommendations: 
  You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.<br>
  For more info visit <a href="https://webpack.js.org/guides/code-splitting/" rel="nofollow noreferrer">https://webpack.js.org/guides/code-splitting/</a></p>
  
  <hr>