使用 webpack 将构建文件复制到另一个项目

Question

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

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

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

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

Answer 1

我看到了几种方法来达到你的目的：

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

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

1. 如果您需要两份捆绑包副本（一份在前端文件夹，另一份在后端），您可以在构建完成后使用FileManagerPlugin 将捆绑包文件复制到后端。

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

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