HotModuleReplacement 未连接
我目前正在尝试在项目中首次使用 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] 连接行来表示它已链接。
在这个设置中我遗漏了什么吗?
我发现了问题.....我很愚蠢,忘记实际包含由 webpack 输出的 is 文件,因为当时我所做的只是将我的 less 文件编译成 CSS!