Html-webpack-plugin: Need to use different output path

[phkavitha]

How I can it a different output path for the index.html. The dist folder for my app should have the structure:

dist
-> assets -> bundle.js
-> index.html

So, in order to store bundle.js and my other fonts inside assets, I have configured output path as "dist/assets". But, I don't want to have the html file inside assets folder. Is there a way to change the file path for index.html

[phkavitha]

I found the solution so closing it

[marshals]

@phkavitha What was the solution? Thanks.

[phkavitha]

@marshals, I used HtmlWebpackPlugin and generated the index.html using a template. Here is my setup:

1. Created a template .html file inside the app folder.
2. Used HtmlWebpackPlugin to generate the index.html. You can setup the file path for index.html in the HtmlWebpackPlugin configuration.

Hope it helps. Thanks

[jantimon]

Place javascript in a js folder
Place css in a css folder
Place html in the root folder

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './example.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '',
    filename: 'js/bundle.js'
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new ExtractTextPlugin('css/styles.css')
  ]
};

[marshals]

Thanks for the helpful responses. I had some additional files (font) that I wanted to get placed into my /assets folder as well.

For HtmlWebPack I go down one directory for index.html

new HtmlWebpackPlugin({template: 'index.html', filename: "../index.html"}),

And my output path is:

output: {
  path: path.join(config.rootPath, 'build', 'assets'),
  publicPath: '/assets/'
}

This all seems to work, other than with webpack-dev-server. So in dev configuration I leave everything at the root.

[elad-maimon]

Hi, this is actually a very useful discussion :)

I've tried the approach of setting the HtmlWebpackPlugin's path one directory up
(aka. filename: "../index.html")

And now my dist folder is as expected:

dist/
  index.html
  assets/
      index.js
      index.css

But the problem is webpack-dev-server cannot serve markup from root (localhost:8080/)
It does serve the assets/index.css
What weird is it serves the markup from /assets as well (localhost:8080/assets/index.html)

I guess that's related to the publicPath that is "/assets", but I'd expect it to be aligned with the output folder structure (this is the reason I set it one directory up. It works great on production with nginx but not with webpack-dev-server)

Any idea?

[marshals]

@elad-maimon My webpack configuration is different for dev vs prod. Dev publicPath is '/'.

[elad-maimon]

Actually that works fine, thanks!

But I'm a bit confused now... since in dev I have publicPath = '/' so my stylesheet tag refers to "/index.css" but I still have output.path = '/assets' so the real location of my css is "/assets/index.css" (like if I build it. I just guess that in-memory it keeps the folder structure, right?)
So how come "/index.css" url responds correctly?

[ThadeuLuz]

My case is exactly as presented by @elad-maimon
For now I'm using the folder prefix on my output.filename values.

[alphakevin]

@elad-maimon I use a script check to set correct html path and this works for me

var IS_WDS = /webpack-dev-server/.test(process.env.npm_lifecycle_script);
//...
   new HtmlWebpackPlugin({
      filename: IS_WDS ? 'index.html' : '../index.html',
      template: path.join(__dirname, 'www/index-template.html'),
    }),

[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.