[ HTML ] Webpackで静的なファイルをコピーする方法

CopyWebpackPluginを使って、build時に、JSONファイルなどをバンドルせずに、単体でコピーする方法。

インストール方法

$ npm i -S copy-webpack-plugin write-file-webpack-plugin

file-webpack-pluginを入れることで、debug時に、実際のdistディレクトリにも書き出されるようになります。

webpack.config.js

importを追加

const CopyFilePlugin = require("copy-webpack-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");

pluginの項目に追加

new CopyFilePlugin(
    [
        {
            context: "src",
            from: "**/*.json",
            to: path.resolve(__dirname, "dist")
        }
    ],
    { copyUnmodified: true }
),
new WriteFilePlugin()

src以下のJSONファイルをdist以下にコピーするという設定。contextで、対象となるディレクトリ／ファイルの親ディレクトリを指定。

参考にしたサイト

https://qiita.com/pepoipod/items/e41105e8f3afd47dc01c
https://codeday.me/jp/qa/20190515/828253.html