Search code examples
javascripthtmlreactjswebpackhtml-webpack-plugin

HTML Webpack Plugin not creating correct index.html file

I am using HTMLWEBPACKPLUGIN to create an html file in the dist folder. I am using the template option of the plugin so that i can add a div in the html file for the root div where my react components will be injected.

Strangely, a hashed file is created with the correct code, and another file, index.html file is created with the name of the other file and the script junction to the bundle.js file instead of having one single html file

webpack.config.js File : 

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 file : 

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>
Solution

  • It's happening because you configured webpack to use file loader for html files.

    The template plugin renders the file by importing it using a loader. By default, the loader returns the file contents. By using the file-loader, webpack thinks you want to obtain the url for the html file instead of it's content when the html webpack plugin renders index.html.

    Maybe you can configure an include directory for the html plugin configuration for the source files, something like

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