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

Question

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

所以每当我更改JS或CSS文件时，我运行webpack build，将构建文件从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({
            onEnd: [{
                copy: [
                    {
                        source: path.join(__dirname, 'dist'),
                        destination: path.join(__dirname, '../backend/frontend')
                    }
                ]
            }]
        })
    ]
};

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