html-webpack-plugin 生成html时包含本地链接的js和css文件答案

【问题标题】：html-webpack-plugin include local linked js and css files when generating htmlhtml-webpack-plugin 生成html时包含本地链接的js和css文件
【发布时间】：2019-09-11 14:08:46
【问题描述】：

我有一个模板文件，用于使用 html-webpack-plugin 生成最终的输出 html 文件。有没有办法在生成最终文件时包含引用的本地文件？

我的文件结构如下：

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

这是一个 index.html 模板文件：

<!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>

在 webpack.config.js 我有以下内容：

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

这将生成 .\dist\index.html 文件，但不会将 .\public\css\main.css 复制到 .\dist\css\main.css 中。

有没有办法做到这一点？

【问题讨论】：

与文件结构无关，与webpack输出配置有关，webpack.js.org/configuration/output
遇到同样的问题，如果我解决它，我会回来回答

标签： webpack html-webpack-plugin

【解决方案1】：

从answer 中可以看出，如果您想使用自己的 CSS 和 Html，则需要在构建应用程序时将静态文件复制到 dist。

为此，您可以使用following plugin

并在插件会话中的 webpack 配置中添加以下行来完成

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

记得在文件开头导入插件。

【讨论】：