html-webpack-plugin 入口点 undefined = index.html
[英]html-webpack-plugin Entrypoint undefined = index.html
问题描述
I'm trying to set a webpack4 and React boilerplate, but facing issue rendering the index.html.
我正在尝试设置 webpack4 和 React 样板，但在呈现 index.html 时遇到问题。 For example, when I updated the title of the index.html and the index.html in /dist folder is not updated, and only title is rendered while nothing in index.js is rendered.例如，当我更新 index.html 的标题时，/dist 文件夹中的 index.html 没有更新，只呈现标题，而 index.js 中的任何内容都没有呈现。 Please help take a look with below details in my project.请帮助查看我的项目中的以下详细信息。
package.json包.json
{
"name": "react-webpack-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"redux-immutable-state-invariant": "1.2.3",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"bootstrap": "^4.1.1",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"redux": "3.5.2",
"redux-thunk": "2.0.1"
}
}
webpack.config.js: webpack.config.js：
// state rules for babel loader
// This plugin will generate html files with scripts injected
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader" // it will look for .babelrc
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000
}
}
}
]
},
plugins: [htmlPlugin]
};
index.html:索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React 2</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
index.js:索引.js：
import React from "react";
import {ReactDOM} from 'react-dom';
console.log('loading index js');
const App = () => {
return (
<div>
<h3>Our Application Is Alive</h3>
<p>This isn’t reality. This — is fantasy.</p>
<p>Yes I am quoting Star Trek I cant help it.</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('index'));
After build, the ./dist/index.html is not updated, see content: build后，./dist/index.html没有更新，看内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
<script type="text/javascript" src="main.js"></script></body>
</html>
below are found in compilation message:以下是在编译消息中找到的：
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html]
327 bytes {0} [built]
3 个解决方案
解决方案1
0 2018-11-05 00:00:25
The webpack config needs to have an entry and optional output (req for multiple entries). webpack 配置需要有一个条目和可选的输出（多个条目的 req）。 It doesn't know which entries need to be added to index.html.它不知道哪些条目需要添加到 index.html。
As as example in the docs:作为文档中的示例：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist'
}
}
It will add the index.js to your index.html file.它会将 index.js 添加到您的 index.html 文件中。
解决方案2
0 2019-08-08 15:32:11
正如我刚刚在这里报道的https://github.com/jantimon/html-webpack-plugin/issues/1259属性语法是“fileName”而不是“filename”
解决方案3
0 2019-12-06 08:46:47
这是 webpack 4 中一个无意义的错误，使用早期版本的 webpack 运行，如 3.0.7 或忽略stats: { children: false, }的错误stats: { children: false, }将修复这个https://github.com/jantimon/html-webpack-插件/问题/895
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.