私たちはすぐにそれを変更します。webpack.server.config.jsNOTE:すべてを1つのファイルにまとめるためのスマートな方法を見つけるのではなく、すべてを自分のファイルに分割する理由は、これが私の個人的なスタイルだということです。私は何をしようとしているかについて過度に明白であると言う人もいます。これにより、プロジェクトに戻る必要があるときに、私の初期の意図が後から容易に理解することができます。次に、package.jsonスクリプトをそれに応じて更新しましょう。},前述したように、server-dev.jsとserver-prod.jsは同じコードを持ちます。webpack.server.config.jsを次のように変更してみましょう。}ここでは、Webパッケージ4の良さを使って、configファイルがargvをパラメータとして受け取る関数をexportできるようにしています。プロパティに持っています。)を分けているようです。webpack.server.config.jsこの段階では、すべてがうまくいくはずです。startをするとブラウザにソースコードが表示されます。startするのと大きく異なります。指定してWebpack4を実行するとあなたのコードはminifyとuglifyされます。Woot!ここはかなり意訳しました。ビルド固有の機能をDevとProdに適用して、configファイルとserverファイルの分離にポイントがあるようにしましょう。WebpackにはCSSミニファイアがありませんので、私たちは独自のものをインストールして使用します。これにより、イメージをBase64にエンコードし、前述のようにCSSファイルに直接配置します。optimize-css-assets-webpack-pluginwebpack.prod.config.jsの更新されたコードは次のとおりです。}webpack.dev.config.jsは以前と同じままです。Toolsを使用してCSSを見てください。違いが分かるはずです.Devは画像ファイルへのリンクを持っている必要があります。インストールされていないようなので入れてみる。CSSと画像ファイルがそのまま参照できる。CSSはminifyされ、画層ファイルはbase64エンコードしている。Middleware(WDM)は、ソースファイルを監視し、ファイルを保存するたびにWebpackビルドを実行します。すべての変更はメモリ内で処理されるため、ファイルはディスクに書き込まれません。Middlewareの上に構築されているので、まずこの手順を実行する必要があります。4に追いついていないので、webpack.dev.config.jsからオブジェクトをエクスポートすることが期待され、argv.modeを使用してモードを設定する関数をエクスポートすることはできません。代わりに、configファイルにハードコードする必要があります。Webpack4に対応しています。webpack-dev-middlewarewebpack.dev.config.jsを更新しましょう。WDMコードで更新する必要があります。実行すると、うまくいくはずです。ファイル(logger.jsやindex.htmlなど)を変更し、更新するとその変更が表示されます。