HTML Webpack 插件没有创建正确的 index.html 文件

Question

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

Answer 1

您需要为您的文件配置一个名称：https://webpack.js.org/loaders/file-loader/#options

查看 table 中的 'name'。它默认为 [hash].[ext]。如果您希望名称与实际文件保持相同，请在 file-loader webpack 配置中设置 options: { name: '[name].[ext]' }。

用字符串设置名称的文档：https://webpack.js.org/loaders/file-loader/#-string-

Answer 2

发生这种情况是因为您将 webpack 配置为对 html 个文件使用文件加载器。

模板插件通过使用加载程序导入来呈现文件。默认情况下，loader returns 文件内容。通过使用 file-loader，当 html webpack 插件呈现 index.html 时，webpack 认为你想要获取 html 文件的 url 而不是它的内容。 =11=]

也许你可以为源文件的html插件配置配置一个包含目录，比如

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

HTML Webpack 插件没有创建正确的 index.html 文件

HTML Webpack Plugin not creating correct index.html file

html

javascript

reactjs

webpack

html-webpack-plugin