我正在一个React项目中使用Webpack,似乎
它似乎允许我浏览到
假设我有以下目录结构:
然后我运行
然后我添加了
现在突然间我可以很好地浏览 http://localhost:8080/index.html。事实上,我可以访问
HtmlWebpackPlugin
以一种我不理解的奇怪方式影响webpack dev server。它似乎允许我浏览到
index.html
,无论该文件在代码库中的位置如何,在没有dev server的情况下是不可能实现的。假设我有以下目录结构:
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
才能看到我的 Web 应用。如果我尝试浏览 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
做了什么使这成为可能?
root
为您创建HTML文件。可能您在src
中还有另一个index.html
,在第二种情况下会被加载。 - Prajwal