jantimon/html-webpack-plugin

Failing to inject js code into ejs template

Wkalmar opened this issue · 6 comments

Current behaviour 💣

Here's with the code in which I'm facing the issue. The key parts are webpack config in which I'm building typesctipt, concatenating it into 2 bundles, trying to generate index.html with these bundles being injected inside it and finally copy contents inside dist folder

module.exports = {
  entry: './src/main.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js' ]
  },
  output: {
    filename: '[name].[contenthash]',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
     cacheGroups: {
       vendor: {
         test: /[\\/]node_modules[\\/]/,
         name: 'vendors',
         chunks: 'all'
       }
     }
   }
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: './styles/*'
    }]),
    new CopyWebpackPlugin([{
      from: './assets/*'
    }]),
    new HtmlWebpackPlugin({
      template:"./index.ejs",
      inject: 'body'
    }),
  ]
};

Plugin version is

"html-webpack-plugin": "5.5.0",

Here's .ejs template.
When I run npm run build and examine contents of dist folder I see that js bundles are not injected into index.html

Expected behaviour ☀️

Js bundles are injected into index.html

Reproduction Example 👾

Here's the repo

Environment 🖥

Node.js v14.17.6
win32 10.0.19043
npm 6.14.15
webpack@5.65.0
html-webpack-plugin@5.5.0

Sorry, if I just missing something, and thank you in advance!

Did you manage to find the reason?

Anyone have any luck?
Mine is a very simple reactjs project, nothing fancy. But i can reproduce it with just basic js project.

This works correctly

output: {
  path: path.resolve(__dirname, './public/dist'),
  filename: '[name].js',
},

This does not

output: {
  path: path.resolve(__dirname, './public/dist'),
  filename: '[name].[contenthash].js',
},
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.73.0",

The problem is here filename: '[name].[contenthash]', after generation files don't have .js, so html-webpack-plugin can't undestand is it JS or another file and so doesn't inject script tags

Close in favor of #1739