使用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在開發時自動運行構建。 它不會在文件系統中存儲捆綁包，而是將它們保存在內存中。