Using Webpack HtmlWebpackPlugin

Question

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.

nope it is not installed, does it make any difference @Prakashsharma ? — iphonic
– iphonic, Commented Sep 9, 2017 at 19:16
I would say use ejs template instead. You dont need any loader for that. github.com/jantimon/html-webpack-plugin/blob/master/docs/… — Prakash Sharma
– Prakash Sharma, Commented Sep 9, 2017 at 19:18
The link says that if you use html template then you need html-loader for that. — Prakash Sharma
– Prakash Sharma, Commented Sep 9, 2017 at 19:19
I fixed it, the problem was missing test: /\.js$/, for babel-loader it worked for html, though I changed to ejs now. Thanks for help. — iphonic
– iphonic, Commented Sep 9, 2017 at 19:28

Predrag Davidovic · Accepted Answer · 2020-09-21 06:45:08Z

2

Main purpose of HtmlWebpackPlugin is to recognise your entry files and place them into appropriate place (dist/index.html). So you don't need to that manually.

If you don't have HtmlWebpackPlugin you should to remember each file which you use in application and manually add them into index.html.

edited Sep 21, 2020 at 6:45

answered Sep 21, 2020 at 6:05

Predrag Davidovic

1,5762 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Duncan Thacker · Accepted Answer · 2017-09-09 19:17:04Z

1

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.

answered Sep 9, 2017 at 19:17

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

2 Comments

iphonic Over a year ago

I fixed it, the problem was missing test: /\.js$/, for babel-loader it worked for html, though I changed to ejs now. Thanks for help.

Duncan Thacker Over a year ago

I was going to suggest that, but your config didn't have a babel-loader!

Collectives™ on Stack Overflow

Using Webpack HtmlWebpackPlugin

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related