Question

我在反应项目中使用webpack似乎HtmlWebpackPlugin以一种我不理解的奇怪方式影响webpack dev server。它似乎允许我浏览到index.html，无论该文件在代码库中的哪个位置，这是使用dev服务器单独无法实现的。

我们说我有以下目录结构：

myproj/
  |- package.json
  |- webpack.config.js
  |- src/
    |- index.html
    |- index.jsx

和webpack.config.js文件如下所示：

const path = require('path');

module.exports = {
    entry: './src/index.jsx',

    devServer: {
        contentBase: __dirname
    }
};

然后我跑webpack-dev-server --mode=development。由于我devServer.contentBase设置为当前目录（myproj）且index.html文件位于myproj/src内，因此我必须浏览http://localhost:8080/src/index.html以查看我的网络应用。如果我尝试浏览http://localhost:8080/index.html，那么我会得到一个404.这对我来说很有意义。

然后我添加HtmlWebpackPlugin，更改webpack.config.js内的其他内容：

const HtmlWebpackPlugin = require('html-webpack-plugin');
....
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
]

现在突然间我可以浏览http://localhost:8080/index.html就好了。事实上，我可以点击http://localhost:8080/index.html或http://localhost:8080/src/index.html。

该怎么办？ HtmlWebpackPlugin做了什么使这成为可能？

Answer 1

正如您所观察到的，当您运行remoteaddr count 142.4.218.156 592 158.69.26.144 613 167.114.209.28 618时，所有webpack输出文件（包括样式，脚本和服务工作者）将仅从内存加载。这不会将任何文件写入配置的输出目录。

来自Webpack-dev-server文档，

此修改后的包在相对路径的内存中提供在publicPath中指定（请参阅API）。它不会写入你的配置输出目录。捆绑已经存在的地方 URL路径，内存中的包优先（默认情况下）。

Answer 2

您可以同时访问http://localhost:8080/index.html和http://localhost:8080/src/index.html。但是服务方式不同。

对于http://localhost:8080/src/index.html，它由webpack-dev-server提供服务，就像不包含HtmlWebpackPlugin一样。如果您检查此网址的响应内容，您会发现它与磁盘上的src / index.html的内容相同。

对于http://localhost:8080/index.html，它由内存中的HtmlWebpackPlugin提供。如果您检查此网址的响应内容，您会发现所有的捆绑文件都已添加到HTML中（这就是我们使用它的原因）。对于文件名，您可以使用＆＃39;文件名＆＃39;将其配置为您喜欢的任何内容。字段（您也可以指定子目录）。查看https://github.com/jantimon/html-webpack-plugin#options了解更多详情。

Answer 3

好的，我想我想出来了。

TL; DR

添加HtmlWebpackPlugin后，您应该从index.html

中删除此行

<script type="text/javascript" src="main.bundle.js"></script>

并且只浏览http://localhost:8080/index.html。

繁琐的细节：

添加HtmlWebpackPlugin后，它将获取您的index.html文件并合并到指向您的网络包的<script>标记中。它从http://localhost:8080提供此合并的html文件。即使index.html已包含对该包的引用，它也会这样做。

插件实际上并没有用合并版本覆盖index.html。因此，浏览到http://localhost:8080/src/index.html只会显示该文件在磁盘上。

因此，如果您的src/index.html文件在之前显示为，则添加HtmlWebpackPlugin：

<body> <div id="app">it worked</div> <script type="text/javascript" src="main.bundle.js"></script> </body>

然后在之后添加HtmlWebpackPlugin，浏览到http://localhost:8080会为您提供此合并版本：

<body> <div id="app">it worked</div> <script type="text/javascript" src="main.bundle.js"></script> <script type="text/javascript" src="main.bundle.js"></script> </body>

所以现在你将有两个对该包的引用，你在文件中添加的一个引用和添加的HtmlWebpackPlugin。

浏览http://localhost:8080/src会在src/index.html处为您提供磁盘上的内容：

<body> <div id="app">it worked</div> <script type="text/javascript" src="main.bundle.js"></script> </body>

但是，由于他使用HtmlWebpackPlugin的全部意义是让它为您插入捆绑引用，这意味着您应该从<script>中删除src/index.html代码。这反过来意味着浏览src/index.html将不再适用，因为您不再有对您的捆绑的引用！

您现在依赖于让HtmlWepbackPlugin为您插入<script>标记，这意味着您现在必须浏览到http://localhost:8080/index.html以获取其生成的版本。

的WebPack。是。疯狂。

HtmlWebpackPlugin对webpack dev服务器的影响

3 个答案:

TL; DR

繁琐的细节：