WDS: Tags emitted from public root or not at all

[neutraali]

Problem: When using Webpack Dev Server, no tag assets are ever actually emitted, leading to crashes in cases where the main bundle relies on DLL -dependencies. For example, using the following config:

new HtmlWebpackTagsPlugin({
    append: false, // Prepend vendors before app bundle
    hash: true,
    tags: {
        path: 'js',
        glob: '!(app).bundle.*.js',
        globPath: 'path/to/build/js'
    }
})

... Results in the correct tag output:

... But fails to actually emit the asset files:

---

Partial solution: I've managed to get the files emitted to the website "root", but it's obviously not ideal as I'd like to serve those files from under js just like in the production build (identical to js/app.bundle in this case). In this case, using the following config:

const handlePath = (a, b) => {
    let file = a.substring(a.lastIndexOf('/') + 1);
    return `js/${file}`;
};
new HtmlWebpackTagsPlugin({
    append: false, // Prepend vendors before app bundle
    hash: true,
    tags: [
        {
            path: 'path/to/build/js/vendor.bundle.71a7752cee0fd892f808.js',
            publicPath: handlePath
        },
        {
            path: 'path/to/build/js/language.bundle.71a7752cee0fd892f808.js',
            publicPath: handlePath
        }
    ]
})

... Results in the following assets being emitted:

---

Is there a way to get the assets emitted in WDS (preferrably using glob + globPath)?

Relevant package versions in use:

"html-webpack-plugin": "5.5.0"
"webpack": "5.72.1"
"webpack-dev-server": "4.9.0"

[jharris4]

Hi! This plugin is not meant to actually do any emitting of assets, its job is just to output tags into the html file.

If you want assets to also be emitted, you'll need to use the copy-webpack-plugin or similar to accomplish that.

You can see some examples of that in the e2e or browser tests from this repo:

https://github.com/jharris4/html-webpack-tags-plugin/blob/bf5952c14430e998bc097e987a99f03a8eb36033/spec/browser.spec.js#L78

https://github.com/jharris4/html-webpack-tags-plugin/blob/bf5952c14430e998bc097e987a99f03a8eb36033/spec/end_to_end.spec.js#L111

[neutraali]

Thanks for the quick reply @jharris4! Using the following WebpackCopyPlugin config (used only for the dev server itself) I was able to get things rolling:

let vendors = ['language', 'vendor'];
new CopyPlugin({ // Used only for emitting vendor files
    patterns: [
        {
            from: `js/(?:${vendors.join('|')}).bundle.*.js`,
            to: 'path/to/build',
            toType: 'dir',
            context: 'path/to/build',
            info: { minimized: true }
        }
    ]
})

... Still kinda weird that you have to "copy" an already existing file (into the same source folder no less!), but oh well! 🐱