Html-webpack-plugin: How to make html files output to a different directory

[huangshuwei]

now I want html files to output to different directories，because my project contains a single page application entry and multiple pages entry.the entry option such as:

var entry = {
    index: './app/index.js',
    test1:'./pages/js/test1.js',
    test2:'./pages/js/test2.js',
    vendors: [
        'babel-polyfill',
        'vue',
        'vue-router',
        'vuex'
    ]
};

I wish my file output directory is:

├─css
│
├─js
│
└─pages (multiple pages)
 │      test1.html
 │       test2.html
 │
 │  index.html  (single page application entry)

and I have already used the publicPath option:

publicPath:'./'

also I used html-webpack-plugin:

  new HtmlWebpackPlugin({
        filename: './index.html',
        template: __dirname + '/app/index.html',
        inject: 'true',
        chunks: ['index', 'vendors', 'webpackAssets'],
        chunksSortMode: 'dependency'
    }),
    new HtmlWebpackPlugin({
        filename: './pages/test1.html',
        template: __dirname + '/pages/test1.html',
        inject: 'true',
        chunks: ['test1', 'vendors', 'webpackAssets'],
        chunksSortMode: 'dependency'
    }),
    new HtmlWebpackPlugin({
        filename: './pages/test2.html',
        template: __dirname + '/pages/test2.html',
        inject: 'true',
        chunks: ['test2', 'vendors', 'webpackAssets'],
        chunksSortMode: 'dependency'
    })

When I output the file via webpack, only the single page application entry file(index.html) correctly references css and js. Multi-page file css and js path is wrong.

So what should I do？

[mastilver]

The publicPath:'./' is weird

Can you try publicPath:'/' instead

[mastilver]

Can you also give the the "good" paths and "wrong" paths

[mastilver]

Closing this as I assume, the above answer solved your issue

Feel free to reach back if it didn't!

[huangshuwei]

@mastilver
I have already used the publicPath option:

publicPath:'./'

The problem is when I use the publicPath attribute, multiple pages can not correctly reference js, css and other resources.

This is the output file directory:

but multiple pages can not correctly reference js, css and other resources.
such as test1.html, Inline resource reference is:

and the resource reference for a single page application is correct.

[mastilver]

As I said earlier, please use publicPath:'/' without the dot

You src should be /js/..

[lkiarest]

@mastilver if we use '/' as publicPath, it'll be another problem: the context path will be ignored while the http server hosts our files within a context path like 'http://ip:port/context-path/test1.html'. it's better if we can set relative path for js/css references

[lkiarest]

@huangshuwei I have write a plugin to correct the relative path html-webpack-plugin-assets-fix, hope it'll help

[mastilver]

@lkiarest If you want to keep the page context, then just use: publicPath:'', but most of the time it's not advised and means you've got a weird webpack setup

[lkiarest]

hi @mastilver, thanks for you suggestion, bu if we set publicPath as '', the html has same problom as huangshuwei posted:
but multiple pages can not correctly reference js, css and other resources. such as test1.html

[huangshuwei]

@mastilver
This question bothers me for a long time，I can only output multiple pages and single pages to the same directory. And I hope html-webpack-plugin can support relative directory output , such as :

new HtmlWebpackPlugin({
        filename: './pages/test1.html',
        template: __dirname + '/pages/test1.html',
        chunks: ['test1'],
        path:'../'
    })

[huangshuwei]

@lkiarest

@huangshuwei I have write a plugin to correct the relative path html-webpack-plugin-assets-fix, hope it'll help

thanks for your help, I'll try it.

[mastilver]

@huangshuwei you can do filename: 'pages/test1.html' for that

https://github.com/jantimon/html-webpack-plugin#configuration

[huangshuwei]

@huangshuwei you can do filename: 'pages/test1.html' for that
https://github.com/jantimon/html-webpack-plugin#configuration

But the multi-page resource reference address has not changed

[mastilver]

We are not going anywhere with that issue, just create a repository with your issue and I will solve it for you...

[raRaRa]

@huangshuwei Did you ever find a solution? I'm running into the same issue.

Goal: Have sub-folders with index.html that can reference the assets using relative path.
Reason: On S3 I want to have multiple websites in one bucket. /website1/, /website2/, etc. I also have sub-pages such as /website1/test/ where test has its own template file. That way I can set meta tags and stuff customized for that page, since the app is static.

[mastilver]

@raRaRa if you can give us a repository, I will have a look at your issue

[chrisalexander55]

@mastilver , @raRaRa

I am revisiting webpack after 2 years and having the same issue; clearly this issue has not been resolved. I have set-up a repo to boilerplate my own webpack work that generates the same dist/ structures as @huangshuwei and subdirectory HTML pages don't inject bundles/chunks correctly while the root context index.html page does. The repo is here ecmascript-sass-webpack-starter. Any help would be appreciated.

I also opened my own issue that matches, Webpack Dev Configuration Does Not Inject Bundles into Sub-directory HTML Pages

[mastilver]

@chrisalexander55 As I said earlier, use publicPath:'/'

[chrisalexander55]

It is already there: publicPath: '/'.

So let me state that I have no issues when transpiling my production bundles, things are just fine. However, when using html-webpack-plugin with webpack-dev-server (with or without the HotModuleReplacementPlugin) only index.html has inject bundles. HTML docs in pages/ have nothing injected. So, is this a html-webpack-plugin or webpack-dev-server config issue even though I am using publicPath: '/' per this thread's guidance?

[chrisalexander55]

@huangshuwei @raRaRa Did you ever find a workaround for this potential defect? I have it working for production builds but not dev iterative development using webpack-dev-server. Thanks!

[mastilver]

@chrisalexander55 I had a lot of trouble getting around your project.

But I added publicPath to prod config and got it working

Please give me a way to replicate your issue

[chrisalexander55]

@mastilver Thank you for taking the time - it is appreciated.

So I cleaned up my package.json and added publicPath: '/' to the output attribute of prod.config.js. Still no difference. Here are the gists of the output:

• sub-directory document pages/some-page-1.html has correct script paths
• root document index.html has incorrect and correct script paths

Obviously, the goal is to have index.html and sub-directory html files injected with the correct paths. Is there a prod mis-configuration I am making here or should I include another plugin in the processing chain? I am assuming once this is resolved, I can tackle testing with webpack-dev-server. Thanks.

[mastilver]

@chrisalexander55 I'm sorry, I still couldn't reproduce it...

There is something weird that I don't understand in your index template, why do you already have scripts tag in there?

EDIT: I just re-checked our gist, the one you flag as incorrect are already there in your template, just remove / update them!

[chrisalexander55]

@mastilver

I removed the excessive starter/boilerplate commenting I had in my <head> region and all is working as expected: correct relative paths. So you are correct. Moving forward I wonder if this may possibly be revisited once a static <head> is coded and the document undergoes continual editing/transpilation. If I see any weird stuff, I'll post my observations with working use case.

Thanks for your help! All the best.

[tsuijie]

If you need to output html to a separate directory, in my case outside the dist directory, you can do filename: '../index.html' for that.
Absolute path also works: filename: path.resolve(__dirname, '/some/directory/index.html')
Pretty tricky.

[jantimon]

@tsuijie this will cause issues with your webpack dev server - my recommendation is to generate the js file into a sub directory: output: { filename: { 'js/[name].js' } }

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