Question

更新到Webpack 4.19之后，Hmr停止工作并在我更改代码中的所有内容时引发错误。

项目设置： ASP.NET Core 2.0 反应网络包装

最近我已经从Webpack 2.5更新到4.19，因为这是一个很大的更新，在谷歌搜索后，我来这里寻求帮助可能会丢失一些配置。

如果我有任何遗漏，请问，我将提供任何其他信息。

更新代码后我查看错误：

项目文件夹/文件结构

webpack.config.js

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

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        mode: isDevBuild ? "development" : "production",
        entry: {
            'main': './ClientApp/boot.tsx',
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: 'main.js',
            publicPath: isDevBuild ? 'dist/' : ""
        },
        devtool: 'source-map',
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.json'],
        },
        module: {
            rules: [{
                    test: /\.tsx?$/,
                    include: /ClientApp/,
                    use: 'awesome-typescript-loader?silent=true'
                },
                {
                    test: /\.js$/,
                    include: /ClientApp/,
                    use: 'source-map-loader',
                    enforce: 'pre'
                },
                {
                    test: /\.(png|jpg|jpeg|gif|svg|woff2|eot|woff|ttf)$/,
                    use: 'url-loader?limit=25000'
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
            ]
        },
        optimization: isDevBuild ? {} : {
            minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    uglifyOptions: {
                        compress: false,
                        ecma: 6,
                        mangle: true
                    },
                    sourceMap: true
                })
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat([
            // 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
            })
        ]),
        externals: {
            Config: JSON.stringify(isDevBuild ? require('./appsettings.Development.json') : require('./appsettings.json'))
        }
    }];
};

webpack.config.vendor.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        mode: isDevBuild ? "development" : "production",
        stats: {
            modules: false
        },
        resolve: {
            extensions: ['.js']
        },
        module: {
            rules: [{
                    test: /\.(png|jpg|jpeg|gif|svg|woff2|eot|woff|ttf)$/,
                    use: 'url-loader?limit=25000'
                },
                {
                    test: /\.css(\?|$)/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader?minimize']
                },
            ]
        },
        optimization: isDevBuild ? {} : {
            minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    uglifyOptions: {
                        compress: false,
                        ecma: 6,
                        mangle: true
                    },
                    sourceMap: true
                })
            ]
        },
        entry: {
            vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router-dom', 'jquery'],
        },
        output: {
            path: path.join(__dirname, 'wwwroot', 'dist'),
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]',
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "vendor.css",
                chunkFilename: "vendor.css"
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',


         jQuery: 'jquery'
        }),
        // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
        })
    ]
}];

};

package.json

{
  "name": "name",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/enzyme": "^3.1.9",
    "@types/history": "4.6.0",
    "@types/jest": "^22.2.0",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "@types/react-hot-loader": "^4.1.0",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/webpack-env": "^1.13.6",
    "aspnet-webpack": "^3.0.0",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css-loader": "^0.28.11",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "isomorphic-fetch": "2.2.1",
    "jest": "^22.4.2",
    "jest-mock-axios": "^1.0.21",
    "jquery": "3.2.1",
    "json-loader": "^0.5.4",
    "mini-css-extract-plugin": "^0.4.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-hot-loader": "^3.1.3",
    "react-router-dom": "4.1.1",
    "react-test-renderer": "^15.6.2",
    "react-transition-group": "^2.2.1",
    "style-loader": "^0.18.2",
    "typescript": "^3.0.3",
    "url-loader": "^0.5.9",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.3.0",
    "webpack-hot-middleware": "^2.24.1"
  },
  "dependencies": {
    "@types/chart.js": "^2.7.25",
    "@types/node": "^10.10.3",
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.7.2",
    "classnames": "^2.2.5",
    "font-awesome": "^4.7.0",
    "linq": "^3.1.0",
    "moment": "^2.22.2",
    "primeicons": "^1.0.0-beta.9",
    "primereact": "^1.6.2",
    "tslint": "^5.9.1",
    "tslint-react": "^3.4.0",
    "uglifyjs-webpack-plugin": "^2.0.1"
  },
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "build": "./node_modules/.bin/webpack",
    "tslint": "tslint -p tsconfig.json",
    "debug": "node --debug-brk --inspect ./node_modules/jest/bin/jest -i"
  },
  "jest": {
    "setupFiles": [
      "<rootDir>/test-shim.js",
      "<rootDir>/test-setup.js"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(ts|tsx)$": "<rootDir>/test-preprocessor.js"
    },
    "testMatch": [
      "**/__tests__/*.(ts|tsx|js)"
    ]
  }
}

进入类-boot.tsx

 // tslint:disable-next-line:no-var-requires
    require("react-hot-loader/patch");

    import "./css/site.css";
    import "bootstrap";
    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import { AppContainer } from "react-hot-loader";
    import "babel-polyfill";
    import { BrowserRouter } from "react-router-dom";
    import * as RoutesModule from "./routes";
    import 

{ AppConfig } from "./appconfig";
import axios, { AxiosRequestConfig } from "axios";

// Import PrimeReact required files and selected theme
import "primereact/resources/primereact.min.css";
import "font-awesome/css/font-awesome.css";
import "primeicons/primeicons.css";
import "primereact/resources/themes/ludvig/theme.css";

import "./css/custom.css";

let routes = RoutesModule.routes;

axios.defaults.headers.common.Authorization = "Basic " + window.btoa(AppConfig.testUser + ":" + AppConfig.testPassword);

function renderApp() {
    // This code starts up the React app when it runs in a browser. It sets up the routing
    // configuration and injects the app into a DOM element.
    const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!;

    ReactDOM.render(
        <AppContainer>
            <BrowserRouter children={routes} basename={baseUrl} />
        </AppContainer>,
        document.getElementById("react-app"),
    );
}

renderApp();

// Allow Hot Module Replacement
if (module.hot) {
    module.hot.accept("./routes", () => {
        routes = require<typeof RoutesModule>("./routes").routes;
        renderApp();
    });
}

Startup.cs

namespace name
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.SpaServices.Webpack;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true,
                    //ReactHotModuleReplacement = true,
                    //HotModuleReplacementEndpoint = "/__webpack_hmr"
                });
            }
            else

        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });
    }
}

}

Answer 1

已解决。！

只需添加具有所有其他依赖项的babel-loader并使用以下方式更新webpack.config.js

{
                    test: /\.(j|t)sx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true,
                            babelrc: false,
                            presets: [
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: {
                                            browsers: "last 2 versions"
                                        }
                                    }
                                ],
                                "@babel/preset-typescript",
                                "@babel/preset-react"
                            ],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", {
                                    legacy: true
                                }],
                                ["@babel/plugin-proposal-class-properties", {


                   loose: true
                            }],
                            "react-hot-loader/babel"
                        ]
                    }
                }
            },

asp.net react webpack 4 Hmr失败，响应为500

1 个答案: