我正在使用 HTMLWEBPACKPLUGIN 在 dist 文件夹中创建一个 html 文件。我正在使用插件的模板选项，这样我就可以在 html 文件中为将注入(inject)我的 React 组件的根 div 添加一个 div。
奇怪的是，使用正确的代码创建了一个散列文件，并使用另一个文件的名称和与bundle.js文件的脚本连接创建了另一个文件index.html文件，而不是一个单独的html文件
webpack.config.js 文件:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "none",
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
loader: "ts-loader",
options:
{
configFile: 'tsconfig.client.json'
} ,
exclude: /node_modules/
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader" ,
exclude: /node_modules/
},
{
test: /\.html$/,
loader: "file-loader",
exclude: /node_modules/
},
]
},
};
index.html 文件:
31b0c63f79c4c085d45b3861fe75d263.html<script type="text/javascript" src="bundle.js"></script>
hashedFile.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
最佳答案
发生这种情况是因为您将 webpack 配置为对 html 文件使用文件加载器。
模板插件通过使用加载器导入文件来呈现文件。默认情况下，加载器返回文件内容。通过使用文件加载器，当 html webpack 插件渲染 index.html 时，webpack 认为您想要获取 html 文件的 url 而不是它的内容。
也许您可以为源文件的 html 插件配置配置一个包含目录，例如
{
test: /\.html$/,
loader: "file-loader",
include: path.resolve(__dirname, 'src')
}
关于javascript - HTML Webpack 插件未创建正确的 index.html 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49201557/