开发者问题收集

HotModuleReplacement 未连接

2019-07-19
83

我目前正在尝试在项目中首次使用 webpack,并在 Startup.cs 文件中设置了一个 ASP.NET Core 项目,内容如下

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });

我的 Styles 文件夹也包含一些 .less 文件,并且在项目的根目录中有一个 webpack.config.js,其中包含:

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

module.exports = (env) => {
  return [{
    mode: 'development', //TODO Make configurable
    entry: { 'main': './app.js' },
    output: {
        path: path.resolve(__dirname, "wwwroot"),
        filename: "js/[name].js",
        publicPath: "/"
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(less)$/,
                include: [
                    path.resolve(__dirname, "Styles")
                ],
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            }
        ]

    }
  }];
}

当我运行我的应用程序时,我可以在输出中看到它正在编译 webpack 包,并且我在 wwwroot 的 js 和 css 文件夹中看到了我的文件,这表明它正在寻找 webpack 配置文件,我还看到如下行,表明它正在尝试使用 webpack-hot-middleware 插件执行某些操作:

[./node_modules/html-entities/index.js] 231 bytes {main} [built]

[./node_modules/querystring-es3/decode.js] 2.45 KiB {main} [built]

[./node_modules/querystring-es3/encode.js] 2.48 KiB {main} [built]

[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]

[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {main} [built]

[./node_modules/webpack-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 7.68 KiB {main} [built]

但是我没有看到对 HMR 的任何其他引用,并且在控制台中没有看到 [HMR] 连接行来表示它已链接。

在这个设置中我遗漏了什么吗?

1个回答

我发现了问题.....我很愚蠢,忘记实际包含由 webpack 输出的 is 文件,因为当时我所做的只是将我的 less 文件编译成 CSS!

Steven Brookes
2019-07-20