Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failing to inject js code into ejs template #1713

Closed
Wkalmar opened this issue Dec 17, 2021 · 6 comments
Closed

Failing to inject js code into ejs template #1713

Wkalmar opened this issue Dec 17, 2021 · 6 comments

Comments

@Wkalmar
Copy link

Wkalmar commented Dec 17, 2021

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!

@xlei1123
Copy link

?

@jantimon
Copy link
Owner

Did you manage to find the reason?

@Wkalmar
Copy link
Author

Wkalmar commented Feb 20, 2022

@jantimon no

@DarkAxi0m
Copy link

DarkAxi0m commented Dec 21, 2022

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",

@alexander-akait
Copy link
Collaborator

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

@alexander-akait
Copy link
Collaborator

Close in favor of #1739

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants