Webpack开发服务器在源更改后不会注入资产
我开始构建一个基于React，TypeScript和Webpack的小应用程序。我关注了这篇文章：https://www.typescriptlang.org/docs/handbook/react-
所有来源都存储在GitHub回购：https://github.com/aszmyd/webpack-react-typescript-bug
问题是：
当我启动webpack dev server进行本地开发时，它会正确地为localhost:8080下的文件提供服务，并根据webpack配置正确地注入动态资产。但当我更改源文件中的某些内容时，会触发重建，所有内容似乎都被正确触发，但动态资产不会被注入索引中。html。因此，在对源tsx文件进行任何更改之后，我在localhost:8080上得到了一个空屏幕，因为包。js文件未被注入
所以报告的步骤：
- 克隆我的测试用例repo:https://github.com/aszmyd/webpack-react-typescript-bug
初始生成的索引。html如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
在至少1个webpack dev服务器观看巡演和构建之后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
</body>
</html>
共有1个答案
您可以使用html-webpack-plugin和cop-webpack-plugin在dist目录中创建一个index.html。
plugins: [
new CopyWebpackPlugin([
{from: 'index.html'},
], {
copyUnmodified: true
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
}),
new HtmlWebpackIncludeAssetsPlugin({
assets: [], append: false, hash: true
})
]
您不需要cop-webpack-plugin，因为html-webpack-plugin已经生成了index.html并自动将其放入dist目录。尽管它不需要，但它实际上会导致热重载的问题，因为webpack-dev-server认为新的index.html是复制的，而不是生成的。要了解为什么会发生这种情况，您可以查看重新编译后的输出。
使用复制插件
Asset Size Chunks Chunk Names
bundle.js 1.06 MB 0 [emitted] [big] main
0.135a3b584db27942bf6f.hot-update.js 1.36 kB 0 [emitted] main
135a3b584db27942bf6f.hot-update.json 43 bytes [emitted]
bundle.js.map 1.26 MB 0 [emitted] main
0.135a3b584db27942bf6f.hot-update.js.map 894 bytes 0 [emitted] main
index.html 146 bytes [emitted]
没有复制插件
Asset Size Chunks Chunk Names
bundle.js 1.06 MB 0 [emitted] [big] main
0.135a3b584db27942bf6f.hot-update.js 1.36 kB 0 [emitted] main
135a3b584db27942bf6f.hot-update.json 43 bytes [emitted]
bundle.js.map 1.26 MB 0 [emitted] main
0.135a3b584db27942bf6f.hot-update.js.map 894 bytes 0 [emitted] main
不同之处在于，使用copy插件可以发出一个新的索引。html，它只是复制的一个，因为html网页包插件没有看到任何更改，因此没有发出新的更改。因此webpack dev server为这个新发布的索引提供服务。html。
注意：如果您在文件名中使用了散列（例如，bundle.[hash].js），它会工作，因为它会发出一个新的索引。html在每次重新编译之后。无论如何，有冲突的插件不是一个好主意。
-
我收到以下错误 拒绝从执行脚本'http://localhost:8080/Docs/bundle.c2e76650.js'因为其MIME类型（'text/html'）不可执行，并且启用了严格的MIME类型检查。 如果路径只有一级深（例如localhost/docs），并且带有react-router，那么这似乎是可行的，但一旦路由被嵌套（例如localhost/docs/nestedRoute）
-
问题内容： 分析了整个互联网，但无法弄清楚为什么会发生这种情况。我有一个最简单的项目（使用jersey-quickstart- grizzly2原型），并且只有一个Jersey资源。我将Guice用作DI，因为CDI也不想与Jersey合作。问题在于，Guice在注入Jersey的资源时无法解析要使用的类。它在外面很好用，但不适用于泽西岛。这是泽西岛的资源： 传输接口： 它的实现： 遵循Googl
-
请教Webpack打包后找不到资源？ 入口文件如下： 打包在lib目录，如下： 入口文件index_bundle.js在package.json中设置main指向./lib/index_bundle.js就好了 但是874.index_bundle.js这个文件就找不到了，提示如下 于是我去查了下，说是要设置homepage 但是无论我是设置./lib/还是设置.，都不对 于是我想是不是要将hom
-
我有两个docker容器由docker compose管理，似乎无法正确使用webpack将某些请求代理到后端api。 docker-compose.yml： 服务web是一个简单的react应用程序，由webpack开发服务器提供服务。服务返回是一个节点应用程序。 我没有问题从我的主机访问任何应用程序： 我还可以从web容器ping和curl back服务： 但是我有一个问题与代理。Webpac
-
我试图让在Docker容器中运行，然后通过NGINX主机访问它。初始的加载，但无法连接到开发服务器的Web套接字连接。 VM47:35到“ws://example.com/sockjs-node/834/izehemiu/WebSocket”的WebSocket连接失败：WebSocket握手过程中出错：意外响应代码：400 我使用以下配置。
-
问题内容： 我的单页应用程序在webpack-dev- server上运行。我可以在上加载和重新加载我的进入路线，并且每次都可以使用。但是我只能通过应用程序内的链接加载，即每当我从浏览器刷新按钮重新加载时，我都会 作为服务器响应，在控制台上我得到 内容安全策略：页面的设置禁止自行加载资源（“ default-src http：// localhost：8080 ”）。来源：;（function i