html-webpack-plugin include local linked js and css files when generating html

Question

I have a template file which I use to generate the final output html file using the html-webpack-plugin. Is there a way to include referenced local files when generating the final file?

I have the following file structure:

.\public\index.html
.\public\css\site.css

Here is an index.html template file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <div id="app"></div>
</body>
</html>

Inside the webpack.config.js I have the following:

....
plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
...

This will generate the .\dist\index.html file, however it will not copy over the .\public\css\main.css into .\dist\css\main.css.

Is there a way to do this?

It is not related to the file structure, but to the webpack output config, https://webpack.js.org/configuration/output/ — felixmosh, Apr 22 '19 at 17:51
Have the same issue, if I fix it, I will come back with an answer — Espoir Murhabazi, Jan 17 '20 at 10:35

score 0 · Answer 1 · answered Jan 17 '20 at 11:00

From this answer it's stated that you need to copy the static files to dist when you are building your application if you want to use your own CSS and Html.

For that, you can use the following plugin

And add the following lines in your webpack config in plugin session to do it in

 new CopyPlugin([{ from: "path/to/your/static", to: "/path/to/your/static/in/dist" }])

remember to import the plugin at the beginning of your file.

html-webpack-plugin include local linked js and css files when generating html

1 Answers1