Я просто настраиваю новый проект MVC, используя .NET Core 2.1.Я настроил Webpack для компиляции TypeScript / SASS и т. Д. Вместе с HMR (горячая перезагрузка модуля).
При настройке всего этого у меня был простой HomeController с одним представлением индекса, и все работало правильно.Я только что добавил добавленные в сеть страницы .NET Identity, которые добавляются в новую область «Identity» в проекте.
Вот моя структура проекта:
Проблема в том, что HMR, кажется, сломан в этой области.Я получаю следующую консольную ошибку при запуске проекта:
: 58109 / Identity / Account / dist / __ webpack_hmr: 1 Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено)
Сначала я подумал, что это выглядело неправильно, но потом я проверил URL, который он использует на главной странице / странице указателя (где работает HMR), и это было:
http://localhost:58109/dist/__webpack_hmr
.. поэтому я не совсем уверен, что происходит или какой URL должен быть.
Я обнаружил эту проблему GitHub который предлагает добавить HotModuleReplacementEndpoint = "/dist/__webpack_hmr" к WebpackDevMiddlewareOptions в моем Startup.cs.Я пробовал это, и это не помогло.
У меня в Startup.cs есть следующее, как требуется:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
//HotModuleReplacementEndpoint = "/dist/__webpack_hmr"
});
}
, и мой webpack.config.js выглядит так:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const dirName = 'wwwroot/dist';
const devMode = process.env.NODE_ENV !== "production";
console.log('env:' + process.env.NODE_ENV);
module.exports = {
mode: devMode ? 'development' : 'production',
entry: { main: './wwwroot/js/app.ts' },
output: {
path: path.resolve(__dirname, dirName),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?$!expose-loader?jQuery'
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node-modules/
},
{
test: /\.s[c|a]ss$/,
use: [
'css-hot-loader',
//'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
ctx: {
env: devMode ? 'development' : 'production'
}
}
}
},
'resolve-url-loader',
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
publicPath: 'images'
}
}
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new CleanWebpackPlugin(dirName, {}),
new MiniCssExtractPlugin({
filename: "bundle.css",
chunkFilename: "bundle.css"
})
]
};
Любая помощь будет принята с благодарностью!