Question

我开始构建一个基于React，TypeScript和Webpack的小应用程序来构建。我听过这篇文章：https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

所有来源都存储在GitHub repo：https://github.com/aszmyd/webpack-react-typescript-bug

问题：

当我启动webpack dev服务器进行本地开发时，它正确地提供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>

至少有一个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在index.html目录中创建dist。

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。{p}尽管不需要它，但它实际上会导致热重新加载问题，因为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提供服务。

注意：如果您在文件名中使用了哈希值（例如@Override protected Void doInBackground(Void... params) { try { // Connect to the web site Document document = Jsoup.connect(url).get(); // Using Elements to get the class data Elements img = document.select("div[class=header-logo] a[title=AndroidBegin] img[src]"); // Locate the src attribute String imgSrc = img.attr("src"); // Download image from URL InputStream input = new java.net.URL(imgSrc).openStream(); // Decode Bitmap bitmap = BitmapFactory.decodeStream(input); } catch (IOException e) { e.printStackTrace(); } return null; }），那么它就可以工作，因为它会在每次重新编译后发出新的<div class="header-logo"><a href="http://www.androidbegin.com/" rel="home" title="AndroidBegin"><img src="http://www.androidbegin.com/wp-content/uploads/2013/04/Web-Logo.png" alt="AndroidBegin" class="header-logo" /></a></div> </div>。无论如何，拥有冲突的插件并不是一个好主意。

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

1 个答案: