- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法排除与 aspnetcore 2.2 和 webpack 4 的兼容性问题或我这边的配置问题。
我需要一些帮助来找出配置问题(如果这是原因)。
当我对“.tsx”文件进行更改时,Visual Studio 输出 webpack 已重建,但是浏览器没有刷新,并且控制台中没有消息。 (不过,我确实在浏览器控制台中收到了初始 HMR 连接 消息)。
Visual Studio 输出:
Microsoft.AspNetCore.NodeServices:Information: webpack building... Microsoft.AspNetCore.NodeServices:Information: Checking started in a separate process...
754ms Microsoft.AspNetCore.NodeServices:Information: webpack built 1e45bf5f88ad514f4a12 in 4940ms
Compiled successfully. starting HTTP/1.1 GET https://localhost:44331/__webpack_hmr
webpack.config.js:
const path = require('path');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const outputDir = (env && env.publishDir)
? env.publishDir
: __dirname;
return [{
mode: isDevBuild ? 'development' : 'production',
devtool: 'inline-source-map',
stats: { modules: false },
entry: { 'main': './client/boot.tsx' },
watchOptions: {
ignored: /node_modules/
},
output: {
filename: "dist/[name].js",
path: path.join(outputDir, 'wwwroot'),
publicPath: '/'
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
devServer: {
hot: true
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
include: /client/,
loader: [
{
loader: 'awesome-typescript-loader',
options: {
useCache: true,
useBabel: true,
babelOptions: {
babelrc: false,
plugins: ['react-hot-loader/babel'],
}
}
}
]
},
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [
new CleanWebpackPlugin(path.join(outputDir, 'wwwroot', 'dist')),
new CheckerPlugin()
]
}];
};
Startup.cs配置:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
}
package.json:
"devDependencies": {
"@babel/core": "*",
"@babel/preset-env": "*",
"@types/history": "4.6.0",
"@types/jest": "^23.3.2",
"@types/node": "^10.9.1",
"@types/react": "^16.7.13",
"@types/react-dom": "16.0.11",
"@types/react-hot-loader": "3.0.3",
"@types/react-router": "4.4.1",
"@types/react-router-dom": "4.3.1",
"@types/webpack-env": "^1.13.6",
"aspnet-webpack": "^3.0.0",
"awesome-typescript-loader": "^5.2.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "*",
"clean-webpack-plugin": "^0.1.19",
"crypto-js": "^3.1.9-1",
"css-loader": "0.28.4",
"enzyme-to-json": "^3.3.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"file-saver": "^1.3.8",
"isomorphic-fetch": "2.2.1",
"jest": "^23.6.0",
"jquery": "^3.2.1",
"json-loader": "0.5.4",
"moment": "^2.22.2",
"raf": "^3.4.0",
"react": "^16.6.3",
"react-deep-force-update": "2.1.1",
"react-dom": "^16.6.3",
"react-hot-loader": "^4.0.0",
"react-router-dom": "4.1.1",
"react-select": "^2.0.0",
"style-loader": "0.18.2",
"ts-jest": "^23.10.3",
"ts-loader": "^2.0.1",
"typescript": "^2.9.2",
"url-loader": "0.5.9",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.2"
编辑:(添加 boot.tsx 和 app.tsx 以显示热模块加载)
boot.tsx
import * as React from 'react';
import { runWithAdal } from 'react-adal';
import * as ReactDOM from 'react-dom';
import App from './app';
import { authContext } from './authentication/azure/azureConfig';
const DO_NOT_LOGIN = false;
function renderApp() {
ReactDOM.render(
<App />,
document.getElementById('react-app')
);
}
runWithAdal(authContext, () => {
renderApp();
}, DO_NOT_LOGIN);
app.tsx
import * as React from 'react';
import { hot } from 'react-hot-loader';
import { Provider } from 'react-redux';
import * as RoutesModule from './routes';
import { BrowserRouter } from 'react-router-dom';
import configureStore from './store/configureStore';
let routes = RoutesModule.routes;
const store = configureStore({});
const baseUrl =
document.getElementsByTagName('base')[0].getAttribute('href')!;
const App: React.SFC = () => <Provider store={store}>
;
export default hot(module)(App);
最佳答案
根据您的上述配置,您将 js 文件打包到 "wwwroot/dist/[name].js"
中。 output
信息表明 Webpack
热重载功能已正确设置。但似乎 Webpack
不知道 index
页面是什么。换句话说,对 *.tsx 模块所做的任何更改都只会重新加载编译后的 wwwroot/dist/main.js 文件。
例如,我创建一个 App.tsx
文件:
import * as React from "react";
import * as ReactDOM from 'react-dom';
export const App = () => <div>Hello World!</div>
并在 boot.tsx
中渲染 App.tsx
。
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {App} from "./App";
ReactDOM.render(<App/>, document.getElementById("appconainer"));
当我通过 MVC
或 StaticFiles
提供索引页,然后使用您的配置进行测试时,Webpack
将不知道它应该使对 home/index
操作(或某些“index.htm”url)进行刷新的请求。
可能的修复方法
由于您已经安装了 react-hot-loader
软件包,一种方法是使用 hot()
函数将根组件转换为 hot-exported
:
// file: `App.tsx`
import { hot } from 'react-hot-loader/root'
export const App = () => <div>Hello World!</div>
export const HotApp = hot(App); // make it hot-exported!
并渲染热导出
根组件:
// file: root.tsx
import * as React from "react";
import * as ReactDOM from 'react-dom';
import {HotApp} from "./App"; // use the Hot-Exported component as the root component
ReactDOM.render(<App/>, document.getElementById("appconainer"));
更多详情,请参阅 docs here
关于asp.net-core - webpack 4 aspnetcore 2.2 HMR 未在浏览器中重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54008527/
我试图对 ASP.Net MVC 有一个高层次的理解,我开始意识到它看起来很像原始的 ASP 脚本。过去,我们将“模型”/业务逻辑代码组织到 VBScript 类或 VB COM 组件中。 当然,现在
我已经搜索了一段时间,但似乎找不到答案。 我想在我的旋转木马中显示一个计数器,左边是当前项目(工作),左边是项目总数。 我的代码:
. 最佳答案 Scott Gu 称这些为代码块。这就是我的看法。 http://weblogs.asp.net/scottgu/archive/2010/04/06/new-lt-gt-syntax
我有一个使用 Visual Studio 2010/.net 4/VB 制作的网站。 我真的很喜欢我发现的 FAQ 系统的布局,因为它很简单,但它是经典的 asp。所以,显然,我不能包括我的母版页布局
好吧,对于你们许多人来说,这个问题可能有一个非常明显的答案,但它让我难住了。 我有一个 asp.net Web 表单,上面有两个控件(嗯,不止这两个,但我们将重点关注这些) - 第一个是 asp:dr
当我将 ASP.NET 复选框控件设置为 asp.net 更新面板的异步回发触发器时,EventName 属性是什么? 最佳答案 我相信它是 CheckedChanged。 关于asp.net - a
我有一个用经典 asp 编写的(巨大的)网站。现在我必须切换到 vb.net (razor)。有没有办法将这两个结合起来直到切换完成? 有没有办法让应用程序与经典的 asp 和 vb.net 一起工作
I am creating a products page, where the user selects an option in a radiobuttonlist for example, an
我最近将一个经典的 ASP 应用程序转换为 ASP.NET 3.5,但我觉得我的经典 ASP 版本要快一些(我不知道可能买家会后悔)。 所以你们能帮我解决这个问题吗,让我知道哪个更快,asp、asp.
从本周开始,我被要求开始学习如何使用 ASP 开发网站。我通过 XNA 对 C# 有一定的经验,所以这部分对我来说并不是什么麻烦。 我一直在关注Music Store Tutorial这需要我设置一个
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我想将一些表单变量发布到经典 ASP 页面中。我不想改变经典的 ASP 页面,因为需要完成大量的工作,以及消耗它们的页面数量。 经典的 ASP 页面需要将表单变量 Username 和 Userpas
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
在某种程度上,这可能是一个异端问题。我们有一个大型站点,其中许多页面仍在ASP中。通常,并没有真正动态的,而是包括(通过SSI或Server.Execute)定期重新生成的HTML块。看起来好像是一个
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我有一个遗留的 ASP 应用程序——在不久的某个时候——需要迁移到 ASP.Net 2.0(以与也在 2.0 中的其他应用程序兼容)。 对于这类事情是否有最佳实践,即作为第一步将当前 html、vbs
我目前在一家公司工作,该公司使用 ASP.NET Webforms 和旧 ASP 页面的组合进行 Web 开发。这对于他们当前的项目来说效果很好,但我想说服/建议他们切换到 ASP.NET MVC,因
我有一个经典的 asp 应用程序。我想将该页面的竞赛表格发布到 Asp.Net 表格。原因是我想在进入数据库之前使用我在 Asp.Net 页面中内置的大量逻辑进行验证,而我对 asp 不太了解。更不用
我知道在 ASP.NET MVC 中,您可以拥有移动 View 并执行类似 Index.mobile.cshtml 的操作。和 _Layout.mobile.cshtml并且服务器知道将这些 View
我需要从一些服务器端 c#.net 代码中调用经典 asp 页面上的 VBscript 函数 - 有谁知道一种干净的方法来做到这一点?在 .net 中重写函数不是一种选择。 我会再解释一下这个问题..
我是一名优秀的程序员,十分优秀!