Nrthugu

I upgraded webpack from 3.8.1 version to 4.19.0 and some other required packages, however after this upgrade, HMR somehow stopped to work on rebuild ( when I change anything in my .tsx files ) On first build application works fine.

package.json

{

"name": "MyApp",

"private": true,

"version": "1.0.0",

"devDependencies": {

    "@types/webpack": "4.0.0",

    "@types/webpack-env": "1.13.6",

    "aspnet-webpack": "3.0.0",

    "aspnet-webpack-react": "4.0.0",

    "awesome-typescript-loader": "3.2.1",

    "event-source-polyfill": "1.0.4",

    "css-loader": "0.28.4",

    "mini-css-extract-plugin": "0.4.4",

    "file-loader": "2.0.0",

    "isomorphic-fetch": "2.2.1",

    "less": "3.7.1",

    "less-loader": "4.1.0",

    "node-noop": "1.0.0",

    "style-loader": "0.18.2",

    "typescript": "3.0.1",

    "url-loader": "0.5.9",

    "webpack": "4.19.0",

    "webpack-cli": "3.1.2",

    "webpack-hot-middleware": "2.24.3"

},

"dependencies": {

    "@progress/kendo-data-query": "1.4.1",

    "@progress/kendo-drawing": "1.5.7",

    "@progress/kendo-react-buttons": "2.3.2",

    "@progress/kendo-react-dateinputs": "2.3.2",

    "@progress/kendo-react-dialogs": "2.3.2",

    "@progress/kendo-react-dropdowns": "2.3.2",

    "@progress/kendo-react-grid": "2.3.2",

    "@progress/kendo-react-inputs": "2.3.2",

    "@progress/kendo-react-intl": "2.3.2",

    "@progress/kendo-react-layout": "2.3.2",

    "@progress/kendo-react-pdf": "2.3.2",

    "@progress/kendo-react-popup": "2.3.2",

    "@progress/kendo-react-animation": "2.3.2",

    "@progress/kendo-theme-default": "2.60.0",

    "@types/deep-equal": "1.0.1",

    "@types/history": "4.6.0",

    "@types/prop-types": "15.5.6",

    "@types/react": "16.4.2",

    "@types/react-dom": "16.0.7",

    "@types/react-hot-loader": "3.0.3",

    "@types/react-redux": "4.4.45",

    "@types/react-router": "4.0.12",

    "@types/react-router-dom": "4.0.5",

    "@types/react-router-redux": "5.0.3",

    "babel-polyfill": "6.26.0",

    "bootstrap-less-port": "0.3.0",

    "deep-equal": "1.0.1",

    "history": "4.6.3",

    "jquery": "3.3.1",

    "moment": "2.22.2",

    "query-string": "5.1.1",

    "react": "16.4.2",

    "react-appinsights": "1.0.4",

    "react-dom": "16.4.2",

    "react-hot-loader": "3.0.0-beta.7",

    "react-redux": "5.0.5",

    "react-resize-detector": "3.1.1",

    "react-router-dom": "4.1.1",

    "react-router-redux": "5.0.0-alpha.6",

    "redux": "3.7.1",

    "redux-form": "7.4.2",

    "redux-logger": "3.0.6",

    "redux-thunk": "2.2.0",

    "serialize-error": "2.1.0",

    "webpack-dev-middleware": "3.4.0"

},

"scripts": {

    "build-dev": "webpack --config webpack.config.vendor.js --env.environment=development && webpack --config webpack.config.js --env.environment=development",

    "build-prod": "webpack --config webpack.config.vendor.js --env.prod && webpack --config webpack.config.js --env.prod"

}

}

webpack configuration file

const path = require('path');

const webpack = require('webpack');

const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

const MiniCssExtractPlugin = require("mini-css-extract-plugin");



module.exports = (env) => {

    if (!env) {

        env = {

            environment: "development"

        };

    }

    const isDevBuild = env && env.environment === "development";



    return [{

        stats: { modules: false },

        entry: { 'main-client': './ClientApp/boot-client.tsx' },

        mode: "development",

        resolve: {

            extensions: ['.js', '.jsx', '.ts', '.tsx'],

            modules: [

                './node_modules',

                './ClientApp'

            ]

        },

        output: {

            path: path.join(__dirname, clientBundleOutputDir),

            filename: '[name].js',

            publicPath: 'dist/'

        },

        module: {

            rules: [

                { test: /.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },

                { test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },

                {

                    test: /.less$/,

                    use: [

                        { loader: 'style-loader' },

                        { loader: 'css-loader' },

                        { loader: 'less-loader', options: { strictMath: true, noIeCompat: true } }

                    ]

                },



                //{ test: /.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "less-loader"] }) },

                {

                    test: /.(woff|woff2|eot|ttf)$/,

                    use: [

                        {

                            loader: 'file-loader',

                            options: {

                                publicPath: ""

                            }

                        }

                    ]

                }

            ]

        },

        plugins: [

            new CheckerPlugin(),

            new MiniCssExtractPlugin({

                filename: "site.css",

                chunkFilename: "site.css"

            }),

            new webpack.DllReferencePlugin({

                context: __dirname,

                manifest: require('./wwwroot/dist/vendor-manifest.json')

            }),

        ].concat(isDevBuild ? [

            // Plugins that apply in development builds only

            new webpack.SourceMapDevToolPlugin({

                filename: '[file].map', // Remove this line if you prefer inline source maps

                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk

            })

        ] : [

                // Plugins that apply in production builds only

                //new webpack.optimize.UglifyJsPlugin()

            ])

    }];

};