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

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/'
          },
        }
    ]
}

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

让我们说你所有的静态资产都在一个文件夹“静态”在根级别，你想复制他们到构建文件夹维护子文件夹的结构，然后 在你的参赛档案中)

//index.js or index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);

以上建议都很好。但是为了直接回答你的问题，我建议在package.json中定义的脚本中使用cpy-cli。

本例期望node位于路径上的某个位置。将cpy-cli安装为开发依赖项:

NPM install——save-dev cpy-cli

然后创建两个nodejs文件。一个用于复制，另一个用于显示复选标记和消息。

copy.js

#!/usr/bin/env node

var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');

var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');

shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));

function callback() {
  process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Adds mark check symbol
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' ✓'));
  callback();
}

module.exports = addCheckMark;

将脚本添加到package.json中。假设脚本在<project-root>/scripts/

...
"scripts": {
  "copy": "node scripts/copy.js",
...

运行脚本:

NPM运行拷贝

One advantage that the aforementioned copy-webpack-plugin brings that hasn't been explained before is that all the other methods mentioned here still bundle the resources into your bundle files (and require you to "require" or "import" them somewhere). If I just want to move some images around or some template partials, I don't want to clutter up my javascript bundle file with useless references to them, I just want the files emitted in the right place. I haven't found any other way to do this in webpack. Admittedly it's not what webpack originally was designed for, but it's definitely a current use case. (@BreakDS I hope this answers your question - it's only a benefit if you want it)

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的文件名。哈希可以用于缓存破坏等。你应该根据自己的需要进行修改。

最有可能的是，你应该使用CopyWebpackPlugin，这是在kevlened回答中提到的。另外，对于某些类型的文件，如.html或.json，你也可以使用raw-loader或json-loader。通过npm Install -D raw-loader安装它，然后你只需要在webpack.config.js文件中添加另一个加载器。

如:

{
    test: /\.html/,
    loader: 'raw'
}

注意:重启webpack-dev-server以使任何配置更改生效。

现在你可以要求html文件使用相对路径，这使得它更容易移动文件夹。

template: require('./nav.html')