webpack配置文件(在webpack 2中)允许你导出承诺链，只要最后一步返回一个webpack配置对象。参见承诺配置文档。从这里开始:

webpack现在支持从配置文件中返回Promise。这允许在配置文件中进行异步处理。

你可以创建一个简单的递归复制函数来复制你的文件，并且只在触发webpack之后。例如:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}

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')  

你不需要到处复制东西，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" }
        ]
    }
};

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

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

//index.js or index.jsx

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

我也被困在这里了。Copy-webpack-plugin对我有用。

然而，'copy-webpack-plugin'在我的情况下是不必要的(我后来才知道)。

Webpack忽略根路径 例子

<img src="/images/logo.png'>

因此，在不使用copy-webpack-plugin的情况下实现此功能 在路径中使用“~”

<img src="~images/logo.png'>

'~'告诉webpack将'images'视为一个模块

注意: 您可能必须在中添加images目录的父目录

resolve: {
    modules: [
        'parent-directory of images',
        'node_modules'
    ]
}

访问https://vuejs-templates.github.io/webpack/static.html