我加载静态图像和字体的方式:

module: {
    rules: [
      ....

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        /* Exclude fonts while working with images, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/fonts'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/images'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          },
        }
    ]
}

不要忘记安装文件加载器来让它工作。

你不需要到处复制东西，webpack的工作方式与gulp不同。Webpack是一个模块捆绑器，你在文件中引用的所有内容都将被包括在内。你只需要为此指定一个加载器。

所以如果你写:

var myImage = require("./static/myImage.jpg");

Webpack将首先尝试将引用的文件解析为JavaScript(因为这是默认的)。当然，这将会失败。这就是为什么您需要为该文件类型指定一个加载器。例如，文件或url加载器获取引用的文件，将其放入webpack的输出文件夹(在您的情况下应该是构建的)，并返回该文件的散列url。

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

通常加载器是通过webpack配置来应用的:

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

当然，您需要首先安装文件加载器才能使其工作。

Webpack 5增加了资产模块，这些模块本质上是普通文件加载器的替代品。我复制了以下文档的相关部分:

asset/resource生成一个单独的文件并导出URL。以前可以通过使用文件加载器实现。 asset/inline导出资产的数据URI。以前可以通过使用url加载器实现。 Asset /source导出资产的源代码。以前可以通过使用原始加载器实现。 asset自动在导出数据URI和发出单独的文件之间进行选择。以前可以通过使用url加载器与资产大小限制。

添加一个你可以使你的配置看起来像这样:

// webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                type: "asset/resource"
            }
        ]
    }
};

要控制文件的输出方式，可以使用模板路径。

在配置中，你可以在这里设置全局模板:

// webpack.config.js
module.exports = {
    ...
    output: {
        ...
        assetModuleFilename: '[path][name].[hash][ext][query]'
    }
}

为了覆盖一组特定的资产，你可以这样做:

// webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                type: "asset/resource"
                generator: {
                    filename: '[path][name].[hash][ext][query]'
                }
            }
        ]
    }
};

提供的模板将生成类似build/images/img.151cfcfa1bd74779aadb.png的文件名。哈希可以用于缓存破坏等。你应该根据自己的需要进行修改。

使用文件加载器模块要求资产是webpack的使用方式(源代码)。然而，如果你需要更大的灵活性或想要一个更干净的界面，你也可以直接使用我的copy-webpack-plugin (npm, Github)复制静态文件。对于静态构建示例:

const CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: 'static' }
            ]
        })
    ]
};

兼容性注意:如果你使用的是旧版本的webpack，比如webpack@4.x.x，请使用copy-webpack-plugin@6.x.x。否则使用最新的。

如果你想复制静态文件，你可以这样使用文件加载器:

对于HTML文件:

在webpack.config.js中:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

在js文件中:

  require.context("./static/", true, /^\.\/.*\.html/);

./static/相对于js文件的位置。

你可以对图像或其他东西做同样的事情。 语境是一种强大的探索方法!!

你可以在package.json中编写bash:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}