Preserving folder structure in output directory with webpack

Question

I have the following folder structure:

/index.html
/app/index.tsx

After bundling with webpack, I would like to have the following ouput directory with the bundle.js injected into the index.html

/dist/index.html
/dist/app/bundle.js
/dist/app/bundle.js.map

I have the following webpack configuration

var webpack = require("webpack")
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = [
    {
        entry: "./app/index",
        output: {
            path: "./dist/app",
            filename: "bundle.js"
        },
        devtool: "source-map",
        resolve: {
            extensions: ["", ".tsx", ".ts", ".js"]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin(),
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ],
        module: {
            loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" },
            ]
        }
    }, 
    {
        output: {
            path: "./dist",
            filename: "bundle.js"
        },
        plugins: [
            new HtmlWebpackPlugin({
                "filename": "./index.html",
                "template": "html!./index.html"
            })
        ]    
    }
]

It seems to work fine, but the script bundle.js is not injected into the index.html as expected. The HtmlWebpackPlugin is supposed to do this. What am I doing wrong?

Does your `./index.html` contain the templating `HtmlWebpackPlugin` expects as in their base template? It won't write the script section otherwise. — Juho Vepsäläinen, Mar 21 '16 at 06:15
Yes. I can rewrite the config where the script gets injected but the folder structure does not get preserved — Chad, Mar 21 '16 at 07:30
If you not using webpack-dev-server you can find answer here: http://stackoverflow.com/questions/36106276/how-to-separate-index-html-and-assets-in-webpack-dev-server/36106310?noredirect=1 — Bob Sponge, Mar 21 '16 at 07:38

score 2 · Accepted Answer · answered Mar 21 '16 at 12:29

This is similar to WebpackHtmlPlugin issue #234.

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.

What you can do is to add the 'app' folder name to the output filename:

module.exports = {
  output: {
    filename: "app/[name]-[hash].js",
    path: "dist",
    publicPath: ""
  },
  plugins: [
    new HtmlWebpackPlugin({
       "template": "html!./index.html"
    }),
  ],
}

This was exactly it. I didn't know how to word the question. Thanks! — Chad, Mar 21 '16 at 12:56

score 0 · Answer 2 · answered Aug 02 '23 at 12:11

The HTML Bundler plugin for Webpack can read template files in a source directory and save compiled HTML files with the same structure in the output directory.

For example, there are templates in the src/views/ source directory:

src/views/index.html
src/views/about/index.html
src/views/news/sport/index.html
src/views/news/sport/hockey/index.html
src/views/news/sport/football/index.html
...

We want to have the same folder structure in the dist/ directory:

dist/index.html
dist/about/index.html
dist/news/sport/index.html
dist/news/sport/hockey/index.html
dist/news/sport/football/index.html
...

Just install the html-bundler-webpack-plugin:

npm install html-bundler-webpack-plugin --save-dev

Add the plugin in the Webpack config:

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: 'src/views/', // the template directory
    }),
  ],
};

All templates from the src/views/ directory will be compiled and saved in the dist/ directory with the same structure. All source script and style files referenced in HTML will be processed automatically.

Preserving folder structure in output directory with webpack

2 Answers2

Linked