Webpack 5如何将assets文件夹下所有图片复制到dist目录而非仅复制已引用图片

我完全懂你的困扰——动态加载的图片、分文件夹存放的响应式图片，这些没法通过默认的asset module自动复制到dist目录，毕竟asset module只处理代码里显式导入的资源。别慌，用copy-webpack-plugin就能轻松搞定，它可以直接把整个assets文件夹原封不动复制到输出目录，完美适配你的动态加载场景。

步骤1：安装插件 #

首先在项目里安装copy-webpack-plugin开发依赖：

npm install copy-webpack-plugin --save-dev
# 或者用yarn
yarn add copy-webpack-plugin --dev

步骤2：修改Webpack配置 #

打开你的webpack.dev.config.ts，先导入插件，然后在plugins数组里添加复制规则。下面是修改后的完整配置，我标注了新增的部分：

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import ESLintPlugin from "eslint-webpack-plugin";
// 新增：导入copy-webpack-plugin
import CopyWebpackPlugin from 'copy-webpack-plugin';

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    publicPath: "/",
    clean: true,
    chunkFilename: "named",
    assetModuleFilename: "[path]/[name][ext][query]"
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ]
          }
        }
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        type: "asset/resource"
      },
      {
        test: /\.scss$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }]
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ForkTsCheckerWebpackPlugin({ async: false }),
    new ESLintPlugin({ extensions: ["js", "jsx", "ts", "tsx"], }),
    // 新增：添加复制assets文件夹的规则
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "assets"), // 替换成你实际的assets文件夹路径，比如"src/assets"
          to: "assets", // 输出到dist/assets下，保持原文件夹结构
          // 如果需要忽略某些文件，可以加glob规则，比如: globOptions: { ignore: ["**/.DS_Store"] }
        },
      ],
    }),
  ],
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "build"),
    historyApiFallback: true,
    port: 4000,
    open: true,
    hot: true
  }
};

export default config;

关键说明 #

• 为什么asset module不行？：asset module是基于Webpack的模块依赖系统工作的，只有在代码里通过import/require引入的资源才会被识别和处理。而你通过动态路径加载的图片（比如/assets/images/${size}/pic.jpg），Webpack在编译时没法解析这些动态字符串，自然不会把它们复制到dist。
• copy-webpack-plugin的优势：它直接基于文件系统复制整个文件夹，不管资源有没有被代码引用，完美覆盖你的动态加载和多尺寸图片场景。
• 路径适配：如果你的assets文件夹在src目录下，把from改成path.resolve(__dirname, "src/assets")即可，输出的to保持"assets"就能让资源出现在dist/assets下，和原结构一致。

额外提示 #

如果生产环境也需要复制assets文件夹，记得在你的webpack.prod.config.ts里做同样的配置哦。

内容的提问来源于stack exchange，提问作者3gwebtrain