HtmlWebpackPlugin 对 webpack dev server 的影响 [英] The effect of HtmlWebpackPlugin on webpack dev server
问题描述
我在 React 项目上使用 Webpack，它看起来像 HtmlWebpackPlugin 以一种我不知道的奇怪方式影响 webpack dev server不明白.
I'm using Webpack on a React project and it seems like HtmlWebpackPlugin affects the webpack dev server in a weird way that I don't understand.
它似乎允许我浏览 index.html，无论该文件在代码库中的哪个位置，这是单独使用开发服务器无法实现的.
It seems to allow me to browse to index.html no matter where that file is in the code base, something that is not possible using the dev server alone.
假设我有以下目录结构:
Let's say that I have the following directory structure:
myproj/
|- package.json
|- webpack.config.js
|- src/
|- index.html
|- index.jsx
和一个看起来像这样的 webpack.config.js 文件:
and a webpack.config.js file that looks like this:
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.这对我来说很有意义.
Then I run webpack-dev-server --mode=development. Since I have devServer.contentBase set to the current directory (myproj) and the index.html file is inside myproj/src, I must browse to http://localhost:8080/src/index.html to see my web app. If I try browsing http://localhost:8080/index.html then I get a 404. That makes sense to me.
然后我添加了 HtmlWebpackPlugin，在 webpack.config.js 中没有改变任何其他内容:
Then I add the HtmlWebpackPlugin, changing nothing else inside 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.
Now all of a sudden I can browse to http://localhost:8080/index.html just fine. In fact, I can hit either http://localhost:8080/index.html or http://localhost:8080/src/index.html.
这是怎么回事?HtmlWebpackPlugin 做了什么使这成为可能?
What's up with that? What did HtmlWebpackPlugin do to make this possible?
推荐答案
好吧，我想我明白了.
一旦你添加了 HtmlWebpackPlugin，你应该从 index.html 中删除这一行:
Once you add HtmlWebpackPlugin you should remove this line from 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 已经包含对包的引用，它也会这样做.
Once you add in HtmlWebpackPlugin, it takes your index.html file and merges in a <script> tag that points to your webpack bundle. It serves this merged html file from http://localhost:8080. It does this even if index.html already contains a reference to the bundle.
插件实际上并没有用合并的版本覆盖 index.html.因此，浏览到 http://localhost:8080/src/index.html 只会显示磁盘上的文件.
The plugin doesn't actually overwrite index.html with the merged version. So browsing to http://localhost:8080/src/index.html just shows you that file as it is on disk.
所以如果你的 src/index.html 文件看起来像这样 before 你添加 HtmlWebpackPlugin:
So if your src/index.html file looks like this before you add HtmlWebpackPlugin:
<body>
<div id="app">it worked</div>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
然后在之后添加HtmlWebpackPlugin，浏览到http://localhost:8080 会给你这个合并的版本:
then after you add HtmlWebpackPlugin, browsing to http://localhost:8080 gives you this merged version:
<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 添加的.
So now you will have two references to the bundle, the one you added in the file and the one HtmlWebpackPlugin added.
浏览到 http://localhost:8080/src 会为您提供磁盘上 src/index.html 的内容:
Browsing to http://localhost:8080/src gives you what's on disk at src/index.html:
<body>
<div id="app">it worked</div>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
但是，由于使用 HtmlWebpackPlugin 的全部目的是让它为您插入包引用，这意味着您应该从
