Webpack 开发服务器 + React + Typescript 在源更改后不会注入资产答案

【问题标题】：Webpack dev server + React + Typescript wont inject assets after sources changeWebpack 开发服务器 + React + Typescript 在源更改后不会注入资产
【发布时间】：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>

【问题讨论】：

标签： reactjs typescript webpack webpack-dev-server

【解决方案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。无论如何，有冲突的插件不是一个好主意。

【讨论】：

非常感谢！它是如此合乎逻辑，以至于我感到尴尬，我自己还没有弄清楚。但我很高兴你做到了。再次感谢！