Webpack dev server + React + Typescript 不会在源更改后注入资产

Question

我开始构建一个基于 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 文件 未注入

所以重现步骤：

克隆我的测试用例回购：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>

Answer 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 dev server + React + Typescript 不会在源更改后注入资产

Webpack dev server + React + Typescript wont inject assets after sources change

typescript

reactjs

webpack

webpack-dev-server