[英]ASP.NET Core + Webpack(HMR) doesn't see file
我正在為ASP.NET項目配置Webpack HMR。
這是我所有路徑的webpack.config.js
文件代碼:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
let dist = 'wwwroot'
module.exports = {
mode: 'development',
entry: {
app: './src/js/app.js'
},
output: {
path: path.resolve(__dirname, dist),
filename: 'js/[name].min.js',
publicPath: dist +'/'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
},
]
},
{
test: /\.s?[ac]ss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader',
{
loader: "sass-loader",
options: {
includePaths: ["./src/sass"]
}
}
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '../images/',
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'fonts/',
publicPath: '../fonts/',
}
}
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
options: {
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '../images/',
}
}
]
},
resolve: {
alias: {
"jquery.validation": "jquery-validation/dist/jquery.validate.js"
}
},
plugins: [
new CleanWebpackPlugin(dist, {}),
new MiniCssExtractPlugin({
filename: "css/[name].min.css",
chunkFilename: "[id].css",
}),
new CopyWebpackPlugin([
{
from: './src/img',
to: 'images',
toType: 'dir'
}
]),
],
}
我通過npm install aspnet-webpack webpack-hot-middleware webpack-dev-middleware -D
添加了HMR
並將代碼添加到Startup.cs中:
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
這是我嘗試在_Layout.cshtml
文件中使用腳本的_Layout.cshtml
<script src="~/js/app.min.js" asp-append-version="true"></script>
但是我得到了這個錯誤,我也不明白為什么。 我有一個wwwroot文件夾和一個文件。
我試圖重建和清理該項目,但無濟於事。
我該如何解決這個問題?
所以我只是像這樣更新webpack配置
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
let dist = 'src'
module.exports = {
mode: 'development',
entry: {
app: './wwwroot/source/app.js'
},
output: {
path: path.resolve(__dirname, dist),
filename: '[name].min.js',
publicPath: 'src/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
},
]
},
{
test: /\.s?[ac]ss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader',
{
loader: "sass-loader",
options: {
includePaths: ["./wwwroot/sass"]
}
}
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '../images/',
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'fonts/',
publicPath: '../fonts/',
}
}
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
options: {
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '../images/',
}
}
]
},
resolve: {
alias: {
"jquery.validation": "jquery-validation/dist/jquery.validate.js"
}
},
plugins: [
new CleanWebpackPlugin(dist, {}),
new MiniCssExtractPlugin({
filename: "css/[name].min.css",
chunkFilename: "[id].css",
}),
new CopyWebpackPlugin([
{
from: './wwwroot/img',
to: 'images',
toType: 'dir'
}
]),
],
};
現在一切都好。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.