HTML Webpack Plugin not creating correct index.html file

Question

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>

what does your index.html template look like? Also, make sure you are not importing index.html anywhere in your code — Brandon
– Brandon, Commented Mar 9, 2018 at 20:28
What are you using the html file-loader for? You have to add index.html to your excludes as well. — Chase DeAnda
– Chase DeAnda, Commented Mar 9, 2018 at 20:54
it is rust code with jinja like style ( called askama ) where there is no plugins for that stack — mercury
– mercury, Commented Nov 11, 2023 at 19:22

daz · Accepted Answer · 2019-05-29 19:30:45Z

3

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')
}

answered May 29, 2019 at 19:30

daz

7846 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

webdevdani · Accepted Answer · 2018-03-09 20:25:14Z

-1

You need to configure a name for your files: https://webpack.js.org/loaders/file-loader/#options

Check out 'name' in the table. It defaults to [hash].[ext]. If you want the name to remain the same as the actual file, set options: { name: '[name].[ext]' } in your file-loader webpack configuration.

Doc for setting name with a string: https://webpack.js.org/loaders/file-loader/#-string-

answered Mar 9, 2018 at 20:25

webdevdani

1,1127 silver badges11 bronze badges

Collectives™ on Stack Overflow

HTML Webpack Plugin not creating correct index.html file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related