问题描述
我正在尝试将Webpack与ASP.net Core 3.1解决方案集成在一起,以便能够捆绑我的JS和JSX文件。 捆绑正常运行,但是我要启用热模块更换(自动重新加载)功能 我尝试按照本指南中的步骤操作:ReactJs Webpack and ASP.NET Core ,但是由于创建了捆绑包,因此我无法真正使它生效,但是在保存更改时不会自动重新加载页面。
我还尝试了本教程作为解决方法,因为现在不建议使用“ Microsoft.AspNetCore.SpaServices”:The deprecated ASP.NET Core SpaServices
在我当前正在使用的配置下面找到:
Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",pattern: "{controller=Home}/{action=Index}/{id?}");
if (env.IsDevelopment())
{
// This forwards everything to the "vue-cli-service":
endpoints.MapToVueCliProxy(
"{*path}",new SpaOptions { SourcePath = "wwwwroot" },npmScript: "buildDev",port:82081,regex: "Compiled successfully");
}
});
app.UseSpa(spa =>
{
spa.Options.sourcePath = "wwwwroot";
});
webpack.config.js
var path = require('path');
//var glob = require("glob");
var config = {
// Todo: Add common Configuration
module: {
rules: [
{
test: /\.(js|jsx)/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
"presets": ["@babel/preset-env","@babel/preset-react"]
}
}
}
]
},mode: 'development',devtool: 'inline-source-map',watch: true,devServer: {
hot: true
}
};
var reactConfig = Object.assign({},config,{
entry: { main: './wwwroot/js/tutorial.jsx' },output: {
path: path.resolve(__dirname,'wwwroot/dist'),publicPath: "dist/",filename: 'reactbundle.js'
},resolve: {
extensions: ['.js','.jsx'],}
});
var jsConfig = Object.assign({},{
entry: { main: './wwwroot/js/site.js' },filename: 'jsbundle.js'
}
});
module.exports = [
reactConfig,jsConfig,];
package.json
"scripts": {
"build": "webpack","buildDev": "webpack --watch --mode=development","buildProd": "webpack --mode=production","test": "echo \"Error: no test specified\" && exit 1"
},
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)