Webpack.config.jsの設定内容の備忘録（webpack5）
きむおば
このブログではアフィリエイト・アドセンス広告を利用しています
当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。
あまりよくわかっていないし、1度設定したファイルをエラーが発生するまで使い続けるので、次に困った時は自分でも何を書いたか覚えていないwebpackの設定内容はまりポイントと解決方法をメモするだけの投稿です。
目次（読みたいところへジャンプ！）
HTMLファイルだけはminifyしない
参考になったのはこちらの記事。
＞＞＞webpackでビルドするときHTMLファイルだけ圧縮されないようにする | foolish-pine.com
module.exportsのminimize: false だけではminifyされてしまいます。
html-loaderを使用しているなら、html-loaderのoptionsでもminimize: false 、HTMLWebpackPluginを使用しているなら、そこでもminify: falseと2箇所の設定が必要でした。
module: {
rules: [
use: [
{
loader: 'html-loader',
options: {
minimize: false
},
},
],
],
},
plugins: new HtmlWebpackPlugin({
minify: false,
}),
画像ファイルはバンドルせず別ファイルに保存する
asstet/resouse : 画像ファイルを分けて保存
asset/inline : 画像ファイルをjsにバンドルして保存
asset : url-loaderで設定制限内サイズ画像はバンドル、制限オーバー画像を分けて保存
module: {
rules: [
test: /\.(jpg|jpeg|png|gif|svg)$/i,
type: 'asstet/resouse',
],
},画像ファイル名をhash値ではなくそのまま保存されるようにする
assetModuleFilenameを設定しておくと、src内に保存した画像名のままビルドされる
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
assetModuleFilename: 'images/[name][ext]',
},
