マージでハマったので備忘録。
2025.11.27追記
というか前提としてこのやり方自体が間違っていたので、ボクが多いにアホでした。
Webpackはエントリーポイントのjs内部にCSSが出力されるので、ローカル開発のときはそのエントリーポイントjsを読み込めばHMR(Hot Module Replacement:リロードせずにモジュール更新で再描画)してくれる。書き出さないとでないやん!って思ってた頃の無知の記録。
ちなみに、dev.configでHMR用のエントリーポイント(style-loader利用)を使い、build.configでmini-css-extract-pluginで個別CSS出力(テーマファイル内)を最近まで利用していた。
今はViteがトレンドだぜ!という記事を見て最近乗り換えた。
解決策
devServer: {
static:path.resolve(__dirname, 'public_html/***/wp-content/themes/***/assets/dest'),
hot: 'only',
compress: true,
port: 3000,
https: true,
proxy: {
'*': {
target: 'https://localhost:****', // nginxで稼働してるwordpressのアドレス
secure: false,
changeOrigin: true,
},
},
devMiddleware: {
writeToDisk: true,
}
}
devMiddlewareでwriteToDisk:trueで解決できた。
海の彼方にいる名も知らぬ友よ。
幾千の感謝を。
Docker / nginxでWordpressを立ち上げて開発しつつ、webpackでbrowserSyncしていたのだけど、browserSyncのバージョンがあがってしまい、browserSync-webpack-pluginが死んだ。
正直pluginだけの問題だからバージョン下げるってのも考えはしたけど、そういうのが嫌でgulpを投げ捨ててwebpackにしたので、なんとか解決した。
ニッチな製作していると突然死んでしまう。
