Javascript HTML网页包插件未创建正确的index.HTML文件_Javascript_Html_Reactjs_Webpack_Html Webpack Plugin

Javascript HTML网页包插件未创建正确的index.HTML文件

javascript html reactjs webpack

Javascript HTML网页包插件未创建正确的index.HTML文件,javascript,html,reactjs,webpack,html-webpack-plugin,Javascript,Html,Reactjs,Webpack,Html Webpack Plugin,我正在使用HTMLWEBPACKPLUGIN在dist文件夹中创建一个html文件。我正在使用插件的模板选项，这样我就可以在html文件中为根div添加一个div，我的react组件将被注入根div 奇怪的是，一个哈希文件是用正确的代码创建的，而另一个文件index.html文件是用另一个文件的名称和与bundle.js文件的脚本连接创建的，而不是一个html文件 webpack.config.js文件： var HtmlWebpackPlugin = require('html-webpack

我正在使用HTMLWEBPACKPLUGIN在dist文件夹中创建一个html文件。我正在使用插件的模板选项，这样我就可以在html文件中为根div添加一个div，我的react组件将被注入根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>

31b0c63f79c4c085d45b3861fe75d263.html

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>


网页包应用程序

您需要为文件配置名称：

在表中签出“name”。它默认为

[hash].[ext]

。如果希望名称与实际文件保持相同，请在文件加载器网页包配置中设置

选项：{name:'[name].[ext]}

用于使用字符串设置名称的文档：

之所以发生这种情况，是因为您将webpack配置为对html文件使用文件加载器

模板插件通过使用加载程序导入文件来呈现文件。默认情况下，加载程序返回文件内容。通过使用文件加载器，当html webpack插件呈现index.html时，webpack认为您希望获取html文件的url，而不是其内容

也许您可以为源文件的html插件配置配置include目录，比如

{
    test: /\.html$/,
    loader: "file-loader",
    include: path.resolve(__dirname, 'src')
}

您的index.html模板是什么样子的？另外，请确保您没有在代码中的任何位置导入

index.html

，您使用html文件加载程序的目的是什么？您还必须将

index.html

添加到排除项中。