静态资源处理

静态资源包括所有图片、视频、字体、svg等等资源

特别注意：

1. webpack不会处理绝对路径， 例如：src="/static/excelTpl/xxx.xlsx"只会原文输出

2. 若要进行路径拼接，拼接后的路径为string，需要用require()包裹

1. 复制public文件到dist

将已存在的单个文件或整个目录复制到 dist目录。

copy-webpack-plugin - npm

• 安装

pnpm add -D copy-webpack-plugin

• 配置

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          globOptions: {
            ignore: ["*/index.html"], // 忽略index.html文件
          },
        },
      ],
    }),
  ],
};

2. webpack5静态资源类型

• asset：webpack5通用资源处理类型，默认8kb一下的资源会被转成base64，也可以通过配置指定阈值大小

• asset/resource：会将资源处理成单独文件，可以指定导出文件的路径以及命名

• asset/inline：将资源转成base64

• asset/source：直接将资源内容以字符串形式引入到 JavaScript 代码中。适用于像原始文本、源代码等资源，引入后可以直接使用。

3. 处理图片

{
  test: /\.(png|jpe?g|gif|webp)$/i,
  type: "asset", // 资源类型
  generator: {
    filename: "static/images/[name].[contenthash:6][ext]", // 图片文件名
  },
  parser: { 
    dataUrlCondition: {
      maxSize: 10 * 1024, // 小于10kb的图片转为base64格式
    },
  },
},

4. 处理 svg

{
  test: /\.(svg|ico)$/i,
  type: "asset/resource", // svg和ico文件
  generator: {
    filename: "static/images/[name].[contenthash:6][ext]", // 图片文件名
  },
},

5. 处理字体

{
  test: /\.(woff2?|eot|ttf|otf)$/i, // 字体
  type: "asset/resource", // 资源类型
  generator: {
    filename: "static/fonts/[name].[contenthash:6][ext]", // 字体文件名
  },
},

6. 处理json

{
  test: /\.json$/i,
  type: "asset/resource", // json文件
  generator: {
    filename: "static/json/[name].[contenthash:6][ext]", // json文件名
  },
},

7. 处理音视频

{
  test: /\.(mp3|wav|flac|aac|ogg)$/,
  type: "asset/resource", // 资源类型
  generator: {
    filename: "static/audio/[name].[contenthash:6][ext]", // 音频文件
  },
},
{
  test: /\.(mp4|avi|mkv|flv|wmv|3gp)$/,
  type: "asset/resource", // 资源类型
  generator: {
    filename: "static/video/[name].[contenthash:6][ext]", // 视频文件名
  },
},