🌊

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

2022/09/24に公開約1,000字

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

のようになります。

Discussion

ログインするとコメントできます