I’m trying to use HtmlWebpackPlugin to generate .HTML file
when running build with webpack i get this issue where the src of script tag in HTML file is not same as the script file name
here is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { entry: { index: path.resolve(__dirname, '../src/index.js') }, output: { filename: 'bundle.[fullhash].js', path: path.resolve(__dirname, '../dist/'), }, devtool: 'source-map', plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../src/index.html'), minify: true, }), ], module: { rules: [ // HTML { test: /.(html)$/, use: ['html-loader'], }, // JS { test: /.js$/, exclude: /node_modules/, use: ['babel-loader'], }, // CSS { test: /.css$/, use: ['style-loader', 'css-loader'], }, // Images { test: /.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { outputPath: 'assets/images/', }, }, ], }, ], }, };
this is the generated HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Document</title> <script defer="defer" src="bundle.3d5baadb547d13677f00.js?3d5baadb547d13677f00" ></script> </head> <body> <script src="1ec740dc7ce75155c1fd.js"></script> </body> </html>
and here is my dist folder:
as you can see the name of bundle file is okay, but the script tag at the and of the body has wrong src
Advertisement
Answer
I found a solution to this in the comments of this Github issue: https://github.com/jantimon/html-webpack-plugin/issues/1638
In the optimization section of your webpack config file, set realContentHash
to false
:
optimization: { // other config ... realContentHash: false, },
So for example my webpack configuration object looks like this:
{ mode: ..., entry: ..., output: ..., module: ..., plugins: ..., optimization: { minimizer: [new CssMinimizerPlugin(), "..."], // other config realContentHash: false, } }
This can sometimes produce the suboptimal situation where hashes change more than is necessary, but it seems to be the best solution for now (pending updates to the issue.)