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

我看到了几种实现目标的方法：

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

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

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

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

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

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

1 个答案: