HTML Webpack 插件未创建正确的 index.html 文件
Posted
技术标签:
【中文标题】HTML Webpack 插件未创建正确的 index.html 文件【英文标题】：HTML Webpack Plugin not creating correct index.html file 【发布时间】：2018-08-18 11:39:09 【问题描述】：我正在使用 htmlWEBPACKPLUGIN 在 dist 文件夹中创建一个 html 文件。我正在使用插件的模板选项，以便我可以在 html 文件中为将注入我的反应组件的根 div 添加一个 div。
奇怪的是，一个散列文件是用正确的代码创建的，另一个文件 index.html 文件是用另一个文件的名称和与 bundle.js 文件的脚本连接创建的，而不是只有一个 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>
【问题讨论】：
你的 index.html 模板是什么样的？另外，请确保您没有在代码中的任何位置导入index.html
你用 html 文件加载器做什么？您还必须将 index.html 添加到您的排除项中。
【参考方案1】：
这是因为您将 webpack 配置为对 html 文件使用文件加载器。
模板插件通过使用加载器导入文件来呈现文件。默认情况下，加载程序返回文件内容。通过使用文件加载器，当 html webpack 插件呈现 index.html 时，webpack 认为您想要获取 html 文件的 url 而不是它的内容。
也许您可以为源文件的 html 插件配置配置一个包含目录，例如
test: /\.html$/,
loader: "file-loader",
include: path.resolve(__dirname, 'src')
【讨论】：
【参考方案2】：您需要为您的文件配置一个名称：https://webpack.js.org/loaders/file-loader/#options
查看表中的“名称”。默认为[hash].[ext]。如果您希望名称与实际文件保持一致，请在您的文件加载器 webpack 配置中设置 options: name: '[name].[ext]' 。
使用字符串设置名称的文档：https://webpack.js.org/loaders/file-loader/#-string-
【讨论】：
以上是关于HTML Webpack 插件未创建正确的 index.html 文件的主要内容，如果未能解决你的问题，请参考以下文章
Rails 6.1.0 [webpack-cli] TypeError：无法读取未定义的属性“插件”
TypeError：无法读取未定义的属性“javascript”+ terser webpack 插件+ react js