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
のようになります。