angular1 webpack es6 を使用してプロジェクトを作成しようとしました。ビルド構(gòu)成で次の 2 つの問(wèn)題が発生しました。
環(huán)境の切り替え - 変數(shù)、API アドレスなどを切り替えます。
コードを保存した後は、手動(dòng)でコンパイルする必要はなく、CSS の変更はページを更新せずに自動(dòng)的にコンパイルされます。
現(xiàn)在の構(gòu)成を投稿します。
リーリー リーリー認(rèn)證高級(jí)PHP講師
Webpack では HMR API が利用可能です /a/11...
CSS の場(chǎng)合は、css-loader または style-loader に直接統(tǒng)合する必要があり、webpack-dev-server の起動(dòng)時(shí)に --hot パラメーターを追加するだけで非常に高速になります。
JS コードにはステータスの問(wèn)題が含まれるため、特に Angular では追加の処理が必要です。狀況によって異なります。
開(kāi)発時(shí)には webpack-dev-server を使用してください。これはライブロードをサポートするだけでなく、ホットアップデートも実裝します
環(huán)境を區(qū)別できるように、スクリプト実行時(shí)に変數(shù)(NODE_ENV=developmentなど)を設(shè)定し、webpack設(shè)定のprocess.env.NODE_ENVを読み込んでください
その後、基本構(gòu)成、開(kāi)発用の構(gòu)成、運(yùn)用環(huán)境用の構(gòu)成という複數(shù)の構(gòu)成ファイルを作成できるため、異なる環(huán)境を區(qū)別することもできます
webpack は、いくつかのグローバル変數(shù)を定義できる DefinePlugin も提供します
ホットアップデートを有効にし、スタイルインラインモードを使用します
を參照してください。具體的な実裝については、/a/11...
ライブロードを行うのは Webpack ではありませんが、Webpack の devserver はライブロードをサポートします。もちろん、express などを使用して獨(dú)自のサーバーを作成することもできます。 Gulp には、ファイルの変更を監(jiān)視し、タスクを再実行できる watch コマンドがあります。gulp をサポートするサーバーを使用することもできます。
使用するwebpack/hot/dev-server
就可以啊。
我自己總結(jié)的 webpack
パッケージ構(gòu)成:
http://yj1438.github.io/2016/...