Webpack 开发服务器 + React + Typescript 在源更改后不会注入资产
Posted
技术标签:
【中文标题】Webpack 开发服务器 + React + Typescript 在源更改后不会注入资产【英文标题】：Webpack dev server + React + Typescript wont inject assets after sources change 【发布时间】：2017-08-21 05:23:57 【问题描述】：我开始构建一个基于 React、TypeScript 和 Webpack 的小应用程序进行构建。我关注了这篇文章：https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
所有源代码都存储在 GitHub 仓库：https://github.com/aszmyd/webpack-react-typescript-bug
问题：
当我启动 webpack 开发服务器进行本地开发时，它会正确地为 localhost:8080 下的文件提供服务，并根据 webpack 配置正确地注入动态资产。 但是当我更改源文件中的某些内容时，重建会被触发，并且一切似乎都被正确触发了，但是 动态资产没有注入到 index.html。因此，在源 tsx 文件发生任何更改后，我在 localhost:8080 处出现空白屏幕，因为 bundle.js 文件 未注入
所以步骤来reporoduce：
-
克隆我的测试用例仓库：https://github.com/aszmyd/webpack-react-typescript-bug
使用
npm install 安装依赖
运行npm start
转到http://localhost:8080
更改某些内容，即src/components/Hello.tsx
初始生成的 index.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 开发服务器观看之旅和构建之后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
</body>
</html>
【问题讨论】：
【参考方案1】：您同时使用html-webpack-plugin 和copy-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
)
]
您不需要copy-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
不同之处在于，使用复制插件，您会发出一个新的index.html，它只是复制的，因为html-webpack-plugin 没有看到任何变化，因此没有发出新的。因此webpack-dev-server 服务于这个新发出的index.html。
注意：如果您在文件名中使用了哈希（例如bundle.[hash].js），它会起作用，因为它会在每次重新编译后发出一个新的index.html。无论如何，有冲突的插件不是一个好主意。
【讨论】：
非常感谢！它是如此合乎逻辑，以至于我感到尴尬，我自己还没有弄清楚。但我很高兴你做到了。再次感谢！以上是关于Webpack 开发服务器 + React + Typescript 在源更改后不会注入资产的主要内容，如果未能解决你的问题，请参考以下文章
带有 React Hot Loader 的 Webpack 开发服务器