关于HMR重建的ERR_INCOMPLETE_CHUNKED_ENCODING

时间:2018-11-10 16:32:30

标签: webpack webpack-hmr

我将webpack从3.8.1版本升级到4.19.0和其他一些必需的软件包,但是,在此升级之后,HMR不知何故停止了重建工作(当我更改.tsx文件中的任何内容时)构建应用程序工作正常。

enter image description here

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配置文件

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()
            ])
    }];
};

0 个答案:

没有答案