使用 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')
    }
};

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

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

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