如何将所有图像复制到 dist 文件夹而不是仅用于 webpack 5

Question

我正在使用 webpack 5，assets module，它工作正常。但问题是它只是将使用过的（导入的）图像复制到 dist 文件夹，而不是从 assets 文件夹中复制所有图像。我的应用具有响应能力，因此每张图片都有不同的 4 个文件夹，所有图片都放在其中。

除此之外，还有许多其他图像通过动态加载。那么如何让 webpack 复制整个文件夹而不是仅仅复制使用过的图像。

这是我的 webpack.dev.config.ts 文件：

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";


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"],
        })
    ],
    devtool: "inline-source-map",
    devServer: {
        contentBase: path.join(__dirname, "build"),
        historyApiFallback: true,
        port: 4000,
        open: true,
        hot: true
    }
};

export default config;

Answer 1

您可以使用require context

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('./images/', true, /\.(png|jpg|jpeg|gif|svg) $/));

如何将所有图像复制到 dist 文件夹而不是仅用于 webpack 5

How to copy all images to dist folder instead of only used with webpack 5

webpack

webpack-5