webpackでJavaScriptやSCSSはビルドできますが、画像やフォントなどのファイルはどう扱えばいいの？と思ったことはありませんか？
特に、静的なファイル（例えばsrc/imagesやsrc/fonts）をdistにそのまま出力したい場合は、自動でコピーする仕組みを作っておくと便利です。
今回は、実務でもよく使われるcopy-webpack-pluginを使ったアセットのコピー方法を解説します。
目次
パッケージのインストール
まずは必要なパッケージをインストールするために、以下のコマンドを実行します。
npm i -D copy-webpack-plugin基本的なwebpack構成
copy-webpack-pluginを使った、webpackの基本的な設定は以下のとおりです。
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js',
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'src/images',
to: 'images',
noErrorOnMissing: true
},
{
from: 'src/fonts',
to: 'fonts',
noErrorOnMissing: true
}
]
})
]
};
プロパティ解説
- from: コピー元のパス（相対パス）
- to: コピー先のディレクトリ（dist配下）
- noErrorOnMissing: コピー元が存在しない場合でもエラーを出さないオプション
まとめ
画像やフォントなどのアセットを自動的にコピーするにはcopy-webpack-pluginがシンプルで便利です。これで、毎回手作業でファイルを移動する手間が省けます。
以上、webpackで画像やフォントなどのアセットをコピーする方法のご紹介でした。
