Using Webpack HtmlWebpackPlugin

I am very new to webpack and stuffs, I need a solution to separate base href of index.html and src for bundle.js, for development and production as both are different.

For Development

base href = localhost

src = /bundle.js

For Production

base href = server url

src = /dist/bundle.js

To solve the above problem I am trying to use HtmlWebpackPlugin, following is the webpack.config.js setting

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname + "/dist",
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
    {
     exclude: /node_modules/,
     use:[
      {
      loader: 'babel-loader',
      options:{
          presets: ['react', 'es2015', 'stage-1']
       }
      },
     ]
  },
  plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       }),
       new HtmlWebpackPlugin({
          template:'index.html',
          inject:'head',
          hash: true,
          baseHref: 'http://localhost:8030/'
      })
  ]
};

and following is the way I am trying to use baseHref into index.html

<html>
  <head>
    <% if (htmlWebpackPlugin.options.baseHref) { %>
      <base href="<%= htmlWebpackPlugin.options.baseHref %>">
    <% } %>

    /*
       Several css are defined with relative path here
    */
  </head>
  <body>
    <div class="container-fluid"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

I am receiving following error by using above settings

I need help to know what I am doing wrong here?

Any help would be highly appreciated.

Thanks.

Answer

https://github.com/jantimon/html-webpack-plugin/issues/212

This issue on Github suggests renaming your “index.html” file to “index.ejs”.

This appears to be because webpack is trying to apply the Babel transpiler to your html file and it fails, the “.ejs” extension will prevent it.

Advertisement

Answer