//webpack dev
const mon = require("./webpackmon");
const merge = require("webpack-merge");
const globImporter = require('node-sass-glob-importer');

module.exports = merge(mon, {
    mode: "development",
  
    module: {

        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [require('autoprefixer')({
                                'overrideBrowserslist': ['> 1%', 'last 2 versions']
                            })],
                        }
                    },
                    {
                        loader: 'sass-loader', options: {
                            sassOptions: {
                                importer: globImporter()
                            }
                        }
                    }]
            },
        ]
    },
    devServer: {
        // contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: true,
        port: 8081
    }
    
});

//webpack dev
const mon = require("./webpack.mon");
const merge = require("webpack-merge");
const globImporter = require('node-sass-glob-importer');

module.exports = merge(mon, {
    mode: "development",
  
    module: {

        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [require('autoprefixer')({
                                'overrideBrowserslist': ['> 1%', 'last 2 versions']
                            })],
                        }
                    },
                    {
                        loader: 'sass-loader', options: {
                            sassOptions: {
                                importer: globImporter()
                            }
                        }
                    }]
            },
        ]
    },
    devServer: {
        // contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: true,
        port: 8081
    }
    
});

//webpack prod
const mon = require("./webpack.mon");
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(mon, {
    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: () => [require('autoprefixer')({
                                'overrideBrowserslist': ['> 1%', 'last 2 versions']
                            })],
                        }
                    },
                    {
                        loader: 'sass-loader', options: {
                            sassOptions: {
                                importer: globImporter()
                            }
                        }
                    }]
                }
        ]
    },
    plugins: [new MiniCssExtractPlugin({
        filename: "./src/css/[name].[contentHash].css"
    },
    ), new CleanWebpackPlugin()]

})

// webpack mon
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 splitting not happening via React lazy import ,and Webpack

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 ponent

Please anyone help I am using webpack 4 and React version 16.9

Getting below message warning console

WARNING in entrypoint size limit: The following entrypoint(s) bined asset size exceeds the remended limit (244 KiB). This can impact web performance. Entrypoints: main (533 KiB) ./src/css/main.000e3971ce67d214e0d7.css main.5877aa0d0c3e45fb034f.js

WARNING in webpack performance remendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js/guides/code-splitting/

• javascript
• reactjs
• typescript
• webpack

• can you provide more details? cause using lazy() is pretty straightforward – Nicky Prabowo Commented Nov 2, 2019 at 11:33
• I changed configuration to create-react-app , code splitting is working fine , so something is definitely wrong with webpack configuration – Vaibhav Mittal Commented Nov 2, 2019 at 12:51
• Attached above are three webpack configuration files , for prod , dev , mon – Vaibhav Mittal Commented Nov 2, 2019 at 13:00

1 Answer 1

In tsconfig.json set "module": "esnext"