如何使ASP.NET Core 2与Webpack 4一起工作并进行热重新加载

Question

我正在尝试将ASP.NET Core 2与Webpack 4和React一起使用，我希望热重新加载。问题是;当我尝试更改其中一个文件时，它会在Chrome中显示此错误：

  

：8100 / dist / __ webpack_hmr无法加载资源：net :: ERR_INCOMPLETE_CHUNKED_ENCODING。

我的package.json：

{
  "name": "ui",
  "private": true,
  "version": "0.1.0",
  "license": "UNLICENSED",
  "description": "Application",
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/jquery": "3.3.1",
    "@types/jsonwebtoken": "^7.2.6",
    "@types/lodash": "4.14.105",
    "@types/moment": "2.13.0",
    "@types/query-string": "^5.1.0",
    "@types/react": "^16.0.40",
    "@types/react-dates": "16.0.5",
    "@types/react-dom": "^15.5.1",
    "@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",
    "@types/webpack": "2.2.15",
    "@types/webpack-env": "1.13.0",
    "airbnb-prop-types": "2.8.1",
    "aspnet-prerendering": "3.0.1",
    "aspnet-webpack": "2.0.1",
    "aspnet-webpack-react": "3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "4.0.0",
    "css-loader": "^0.28.11",
    "domain-task": "3.0.3",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "1.1.11",
    "glob": "^7.1.2",
    "history": "4.6.3",
    "install": "0.10.4",
    "jquery": "3.2.1",
    "jquery-mask-plugin": "1.14.15",
    "jsonwebtoken": "^8.2.0",
    "lodash": "4.17.5",
    "moment": "2.21.0",
    "muicss": "0.9.38",
    "myriad-font": "0.0.2",
    "node-noop": "1.0.0",
    "node-sass": "^4.7.2",
    "numbro": "2.0.5",
    "path": "0.12.7",
    "popper.js": "1.14.1",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "2.1.1",
    "prop-types": "15.6.1",
    "query-string": "^6.0.0",
    "react": "^16.2.0",
    "react-addons-css-transition-group": "15.6.2",
    "react-cookie": "^2.1.4",
    "react-dom": "^16.2.0",
    "react-moment": "0.7.0",
    "react-moment-proptypes": "1.5.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "4.1.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "3.7.1",
    "redux-thunk": "2.2.0",
    "rxjs": "5.5.7",
    "sass-loader": "^6.0.7",
    "sfcookies": "^1.0.2",
    "source-map-loader": "0.2.3",
    "style-loader": "^0.18.2",
    "tslint": "^5.9.1",
    "tslint-react": "^3.5.1",
    "typescript": "^2.7.2",
    "url-loader": "1.0.1",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-hot-middleware": "^2.21.2",
    "webpack-merge": "4.1.2"
  },
  "scripts": {
    "compile-vendor": "webpack --config webpack.config.vendor.js",
    "compile-client": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "@types/react-hot-loader": "^3.0.6",
    "react-hot-loader": "^3.1.1"
  }
}

我的webpack.config.js：

"use strict";
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');

module.exports = (env) => { 
    const isDevBuild = !(env && env.prod);

    // Configuration in common to both client-side and server-side bundles
    const sharedConfig = () => ({
        mode: !(env && env.prod) ? 'development' : 'production',
        stats: { modules: false },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    include: /ClientApp/,
                    use: 'awesome-typescript-loader?silent=false'
                },
                {
                    test: /\.(png|jpg|jpeg|gif|svg)$/,
                    loader: "file-loader",
                    options: {
                        limit: 50000,
                        name: "./img/[name].[ext]"
                    }
                },
                {
                    // Match woff2 in addition to patterns like .woff?v=1.1.1.
                    test: /\.(woff|woff2|ttf)(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "file-loader",
                    options: {
                        limit: 50000,
                        name: "./fonts/[name].[ext]"
                    }
                }
            ]
        },
        performance: {
            hints: false
        },
        devtool: 'cheap-module-source-map',
        plugins: [new CheckerPlugin()]
    });

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig(), {
        entry: {
            "main-client": ['./ClientApp/boot-client.tsx'].concat(glob.sync('./ClientApp/img/**/*.svg'))
        },
        module: {
            rules: [
                {
                    test: /\.(scss|css)$/,
                    loader: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [
                            {
                                loader: "css-loader",
                                options: {
                                    importLoaders: 1
                                }
                            },
                            "postcss-loader"
                        ]
                    }),
                    exclude: /node_modules/
                }
            ]
        },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new ExtractTextPlugin("site.css"),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            }),
            new webpack.NamedModulesPlugin()
        ]
    });

    return [clientBundleConfig];
};