webpack5のdevServerを設定すると、SCSSが書き出されない問題の解決設定

マージでハマったので備忘録。

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にしたので、なんとか解決した。

ニッチな製作していると突然死んでしまう。