webpack keeps rebuilt while no update is made to the source React code with dotnet core 2.0

Question

I am having a big issue with my react project with dotnet core 2.0 and webpack. I use dotnet run command in the terminal and shows some info like this. In the Chrome console, some information keeps producing, just like what is shown in the picture below. This information is produced by the webpack module in the react node_module directory and can someone point out how I can fix this problem? Thanks!

here are some information I can offer: terminal information

chrome console output

The package.json file:

{   "name": "dotnetcore",   "private": true,   "version": "0.0.0",   "homepage": "/app/canteen/employee",   "devDependencies": {
    "@types/history": "4.6.0",
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-hot-loader": "3.0.3",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/webpack-env": "1.13.0",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css-loader": "0.28.4",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-hot-loader": "3.0.0-beta.7",
    "react-router-dom": "4.1.1",
    "style-loader": "0.18.2",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "moment": "^2.18.1",
    "react-datetime": "^2.10.1",
    "react-mobile-datepicker": "^3.0.6",
    "react-mobile-picker": "^0.1.10",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-scripts": "1.0.13",
    "react-time": "^4.3.0",
    "redux": "^3.7.2"   } }

The webpack.config.js file

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        // entry: { 'main': './ClientApp/index.js' },
        entry: { 'main': './ClientApp/boot.tsx' },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },

                { test: /\.js?$/, loader: 'babel-loader', exclude: /node_modules/,
                    query:
                    {
                        presets:['react','es2015']
                    } 
                },
            ]
        },
        plugins: [
            new CheckerPlugin(),
            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(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
            // new webpack.optimize.UglifyJsPlugin(),
            // new ExtractTextPlugin('site.css')
        ])
    }];
};

Answer 1

I had the same problem and almost the same webpack setup (we're both using the dotnet core starting template).

I cannot explain what causes the constant reloading but I was able to resolve it by "cleaning" my build files before or on each run of dotnet run. It appears that dotnet run is running the basic webpack command once when it fires. This means your front end files get built again (in ClientApp/dist and wwwroot/dist). If you delete all these files before running dotnet run, then the problem goes away. (warning: don't delete the vendor.* files as the main webpack config file will not rebuild those. You need the webpack.config.vendor.js script for those and that does not get autorun when you run dotnet run).

You can automate this deleting/cleaning process with the clean-webpack-plugin. Here's a snippet of what my webpack.config.js looks like using that plugin:

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = (env) => {
    const clientBundleOutputDir = './wwwroot/dist';
    const serverBundleOutputDir = './ClientApp/dist';
    const cleanOptions = {
        options:  {
            exclude: ['vendor.js', 'vendor.css', 'vendor-manifest.json'],
            verbose:  true,
        },
        pathsToClean: [clientBundleOutputDir, serverBundleOutputDir],
    };

    //.....

    const clientBundleConfig = {
        // ... some webpack settings ...

        plugins: [
            //.... array of some plugins....,
            new CleanWebpackPlugin(cleanOptions.pathsToClean, cleanOptions.options),
        ],

        // ... some more webpack settings ...
    }

    // ....
    return [clientBundleConfig];
}

One caveat with this approach - I have found using this technique suffers in that dotnet run will run through the webpack script (which deletes your files and rebuilds them) and fires up the kestrel server and browser to run your app. Kestrel kicks in and the page attempts to load before webpack finishes rebuilding your files so the first page you see in your browser see will complain that it can't find your app's JS files. So you have to wait a few seconds for webpack to finish and then reload the page. It's not ideal but at least the constant reloading is gone.

Answer 2

Instead of modifying Webpack to clean all files every time, you can just apply this solution when you spot that Webpack enters into this Hot Module Replacement (HMR) loop. I noticed that this happens when you rename files, causing the HMR mechanism gets confused. You can apply the solution from my answer here.

Answer 3

My solution to a constant rebuild was to 'rm -rf node_modules' and 'npm install' again.