我也被困在这里了。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

在我的例子中，我使用webpack作为wordpress插件来压缩js文件，其中插件文件已经被压缩了，需要跳过这个过程。

optimization: {
    minimize: false,
},
externals: {
    "jquery": "jQuery",
},
entry: glob.sync('./js/plugin/**.js').reduce(function (obj, el) {
    obj[path.parse(el).name] = el;
    return obj
}, {}),
output: {
    path: path.resolve(__dirname, './js/dist/plugin'),
    filename: "[name].js",
    clean: true,
},

用于将js文件复制到build文件夹。使用任何其他方法，如文件加载器和复制webpack都会产生问题。

希望它能帮助到一些人。

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

//index.js or index.jsx

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

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

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

对于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文件的位置。

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

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

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

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

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