# 拷贝项目文件资源到构建目录

# 安装依赖

npm i copy-webpack-plugin -D
1

copy-webpack-plugin 是一个复制资源文件的插件,这里用于复制 ico 图标资源

在根目录 public文件夹中新建 favicon.ico

但是webpack处理不会自行对 favicon.ico 处理

当你在 index.html 引入时, <link rel="icon" href="./favicon.ico">

就会因为构建文件中没有 favicon.ico 资源而不展示或控制台提示报错

所以需要配置依赖手动拷贝

# webpack.config.js 配置

/** node模块 文件路径path */
const path = require("path");
/** 拷贝资源Plugin*/
const CopyPlugin = require("copy-webpack-plugin");

/** 配置项 */
module.exports = {
  /** ...其他配置 */

  /** 插件 */
  plugins: [
    /** ...其他配置 */

    //复制public资源到index里面
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "./public"), //将根文件夹下 public文件夹复制到dist目录下
          to: path.resolve(__dirname, "./dist"),
          globOptions: {
            // 忽略index.html文件
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ],
  /** ...其他配置 */
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29