CODEWITHSUNDEEP
javascriptwebpack
Matt Kuhns
Matt Kuhns

Reputation: 1368

Webpack to only inject variables into HTML

I am using a basic example of the HtmlWebpackPlugin to inject variables into my HTML page. I do not have an index.js and do not want the bundle.js. How can I exclude the dist bundle.js and only output the updated HTML?

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: 'HTML Webpack Plugin',
      bar: 'bar'
    })
  ]
};

index.html (the template):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= JSON.stringify(htmlWebpackPlugin.options.title) %></title>
    <script><script src="<%=htmlWebpackPlugin.options.favWord%>/socket.io.js"></script></script> 
  </head>
  <body>
    <h1>Hello, Webpack!</h1>
    <p> My favorite word is <%= JSON.stringify(htmlWebpackPlugin.options.bar) %> </p>
  </body>
</html>

The HTML page is generated perfectly, just I do not want the bundle.js generated.

Upvotes: 1

Views: 1352

Answers (1)

Usha
Usha

Reputation: 156

Old question, but for anyone else with the same issue, you can set the inject option to false.

plugins: [
    new HtmlWebpackPlugin({
        template: 'index.html',
        title: 'HTML Webpack Plugin',
        bar: 'bar',
        inject: false,
    }),
];

Upvotes: 2

Related Questions