Webpack 4 - Preserve folder structure for bundles

Question

I'm can't preserve folder structure for my output bundles.

I tried to use [path] placeholder but it doesn't work. There is similar thread but it does not answer my question.

I'm using: Webpack 4.28.4 and Node v10.15.0.

Entry folder structure:

src
|  
+-- blog
|  |
|  +-- index.js
|  
+-- index.js

webpack.config.js:

  entry: {
    main: './src/index.js',
    blog: './src/blog/index.js'
  },
  output: {
    filename: '[path][name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },

On output I got:

dist
|  
+-- [path]blog.c63bf8952b90c5e5ba3e.js
|  
+-- [path]main.9ad0ffac44f9e88f76ce.js

But I expect:

dist
|  
+-- blog
|  |
|  +-- blog.c63bf8952b90c5e5ba3e.js
|  
+-- main.9ad0ffac44f9e88f76ce.js

Note: I used [name] placeholder to identify files but finally I'll remove it.

score 1 · Answer 1 · answered Feb 03 '21 at 18:57

For anybody looking solution

Only one that i found is using path as entry name(maybe exist some plugin). like in answer above.

I made simply array transform which allows me transform me ts path to entries.

const entries = [
    "admin/ts/form.ts",
    "path/to/some/file.ts"
].reduce((acc, path) => {
    const key =
        path.split("/")
        .map(part => part === "ts" ? "js" : part)
        .join("/")
        .replace(/.ts|.tsx$/, "")
    return {
        ...acc,
        [key]: "./static_src/" + path
    }
}, {})

console.log(entries)

and now in your webpack config you can:

module.exports = {
    mode: 'production',
    entry: entries,
    output:{
        path: path.resolve(__dirname, 'static_compiled'),
        filename: "[name].js"
    },
    ...
}

Thanks! This help me a LOT when I did not want to bundling and keep the folder structure. — b4rtekb, Jul 09 '21 at 22:53

score 0 · Answer 2 · answered Apr 27 '20 at 17:49

If you change the name of your entry chunk to be a path within your output dir that you'd like to see when it is output, that will do the trick for you.

For example, if you renamed your blog entry to blog/blog like below, when webpack generates the bundle and outputs it to the output directory, since the filename is blog/blog, the result will be dist/blog/blog.[contenthash].js. The other file will still be main.[contenthash].js.

This should do the trick for you:

 `entry: {
    main: './src/index.js',
    'blog/blog': './src/blog/index.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  }`

Webpack 4 - Preserve folder structure for bundles

2 Answers2