javascript - 使用 webpack 将构建文件复制到另一个元素

Question

我在同一个父文件夹中有两个元素文件夹。一个用于前端文件(JS、CSS、图像等)，另一个用于后端文件。前端元素使用 webpack 将文件构建到 dist 文件夹中。后端元素是部署到服务器(或在本地主机上运行)的元素。

所以每次我更改 JS 或 CSS 文件时，我都会运行 webpack 构建，将构建文件从 frontend-project/dist 文件夹复制到 backend/frontend/js 或 backend/frontend/css 文件夹并重新运行后端元素。

这真的适得其反。我想在构建到 backend-project 后自动复制 dist 文件。有没有办法在 webpack 中使用插件或不使用插件来做到这一点？我以前曾使用 gulp 完成此类任务，但现在只想完全依赖 webpack。

我尝试了 copy-webpack-plugin ，但它不会在构建后运行，因此对我没有用。

Answer 1

我看到有几种方法可以达到您的目的:

1. 您可以将您的 backend/frontend/js 文件夹指定为您的包的输出文件夹。

module.exports = {
    //...
    output: {
        path: path.resolve(__dirname, '../backend/frontend')
    }
};

1. 如果您需要两个 bundle 副本(一个在前端文件夹中，另一个在后端文件夹中)，您可以使用 FileManagerPlugin在构建完成后将您的捆绑文件复制到后端。

module.exports = {
    //...
    plugins: [
        new FileManagerPlugin({
            events: {
                onEnd: {
                    copy: [
                        {
                            source: path.join(__dirname, 'dist'),
                            destination: path.join(__dirname, '../backend/frontend')
                        }
                    ]
                }
            }
        })
    ]
};

1. 如果您在每次更改代码后手动运行构建，我认为这是没有效率的。您可以使用 webpack-dev-server在开发时自动运行构建。它不会将包存储在文件系统中，而是将它们保存在内存中。