Html-webpack-plugin: publicPath option doesn't work well with the plugin.

[lvarayut]

First of all, thanks for the great plugin. I have some simple question but I can't find any solution from searching through all the issues.

I set the publicPath option in my webpack.config.js to be publicPath: '/assets/' which makes the output of the generated index.html go to the wrong path; /assets/index.html instead of index.html. My currently solution is simply deleting the publicPath. However, I'm just curious that it would be some better solution provided from this plugin. I also have tried filename: '../index.html', but it still doesn't work.

My webpack.config.js

module.exports = {
  entry: {
    app: [
      path.join(__dirname, 'client/index.js'),
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server'
    ],
    vendor: ['react']
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js',
    publicPath: '/assets/'
  },
  devtool: 'eval',
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000'
    }]
  },
  postcss: function() {
    return [precss, autoprefixer];
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin()
  ]
};

[aghreed]

+1

I'm experiencing the same issue. Will workaround by removing publicPath, but it would be nice to see it accounted for.

[jantimon]

From https://github.com/webpack/docs/wiki/configuration#outputpublicpath

output.publicPath
The publicPath specifies the public URL address of the output files when referenced in a browser.

I guess the plugin does the right thing here.
Why is css or js an asset for you?

Wouldn't it be better to place only your assets in your assets folder? e.g.

   {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000&name=assets/[hash].[ext]'
    }

[lvarayut]

Thanks @jantimon. That's the good point. I'll go with it.

[sthzg]

@jantimon is it possible though to have the index.html file created at a parent location of the actual build artifact(s) as in the OP's question? (sorry for asking if it might be too obvious, but I wasn't able to produce output like this)

[jantimon]

Yes try ../index.html.

[sthzg]

@jantimon :bow: thanks for the quick reply. I realized that this works just fine when building to the file system, but not when using the webpack-dev-server (in-memory). I'll check if I am missing something else.

[jamesmfriedman]

@jantimon I found the same problem. Never got it working.

[stevemao]

@sthzg @jantimon any updates on using the webpack-dev-server (in-memory)?

[MattSchiller]

Not sure if this helps, but for future devs, I found that moving my build directory into the filename field for my outputs accomplished what I was looking for (index at root & my bundle in js/build/):

var config = {
    entry: {
        app: './js/src/main.js',
        embedded: './js/src/embedded/embeddedMain.js'
    },
    output: {
        path: __dirname,
        publicPath: '',
        filename: '/js/build/[name].bundle.js'
    },
   ...,
   plugins: [
        ...,
        new HtmlWebpackPlugin({
            template: 'index.template.ejs',
            filename: prod    ? 'index.prod.html' :
                      staging ? 'index.staging.html' :
                                'index.html'
        })

[crobinson42]

If you provide an absolute path to where you want the output file to be, it works like a charm:

new HtmlWebpackPlugin({
      // overwrite the current template file so it can still be used by node.js ejs renders
      filename: path.resolve(__dirname, './views/dashboard.ejs'),
      template: './views/dashboard.template.ejs',
    }),

*Note: if the output file you are expecting the plugin to write to exists, there seems to be a recursive script appended - ensure the output file does not exist first.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.