Noh | エンジニア向け情報共有コミュニティ
Signup / Login

Webpack 5 で静的ファイルをコピーする

webpack
javascript

投稿日: 2024/06/25

write file webpack plugin をインストールします。
ここではdevDependenciesだけに入れてますが、必要ならdependenciesに入るようにしてください。

npm i -D copy-webpack-plugin write-file-webpack-plugin

以下の設定では、frontend/from_public内にあるファイルやフォルダがto_public/packsにコピーされます。

webpack.config.js

const CopyFilePlugin = require("copy-webpack-plugin") ... plugins: [ new CopyFilePlugin({ patterns: [ { context: path.resolve(__dirname, "frontend/from_public"), from: path.resolve(__dirname, "frontend/from_public/**/*"), to: path.resolve(__dirname, "to_public/packs"), }, ], }), ], }

具体的に書くと

frontend/from_public/test.txt ↓ to_public/packs/test.txt
frontend/from_public/test_folder/test.txt ↓ to_public/packs/test_folder/test.txt

となります。

contextはどの階層からコピーするか設定するのに使うっぽいです。

例えばcontext: path.resolve(__dirname, "frontend")と設定を変更すると、

frontend/from_public/test.txt ↓ to_public/packs/from_public/test.txt
frontend/from_public/test_folder/test.txt ↓ to_public/packs/from_public/test_folder/test.txt

のようになります。

yosi

Noh を作ってるエンジニア。

目次