angular.js - webpack はどのようにライブロードを行うのですか?

Question

angular1 webpack es6 を使用してプロジェクトを作成しようとしました。ビルド構成で次の 2 つの問題が発生しました。

1. 環境の切り替え - 変数、API アドレスなどを切り替えます。

2. コードを保存した後は、手動でコンパイルする必要はなく、CSS の変更はページを更新せずに自動的にコンパイルされます。

現在の構成を投稿します。

リーリー リーリー

Answer 1

Webpack では HMR API が利用可能です /a/11...

CSS の場合は、css-loader または style-loader に直接統合する必要があり、webpack-dev-server の起動時に --hot パラメーターを追加するだけで非常に高速になります。

JS コードにはステータスの問題が含まれるため、特に Angular では追加の処理が必要です。

状況によって異なります。

Answer 2

ライブロード

開発時には webpack-dev-server を使用してください。これはライブロードをサポートするだけでなく、ホットアップデートも実装します

環境の切り替え - 変数、API アドレスなどを切り替えます

1. 環境を区別できるように、スクリプト実行時に変数(NODE_ENV=developmentなど)を設定し、webpack設定のprocess.env.NODE_ENVを読み込んでください

2. その後、基本構成、開発用の構成、運用環境用の構成という複数の構成ファイルを作成できるため、異なる環境を区別することもできます

3. webpack は、いくつかのグローバル変数を定義できる DefinePlugin も提供します

ページを更新せずにCSSを変更する

ホットアップデートを有効にし、スタイルインラインモードを使用します

具体的な実装については、/a/11...

を参照してください。

Answer 3

ライブロードを行うのは Webpack ではありませんが、Webpack の devserver はライブロードをサポートします。もちろん、express などを使用して独自のサーバーを作成することもできます。 Gulp には、ファイルの変更を監視し、タスクを再実行できる watch コマンドがあります。gulp をサポートするサーバーを使用することもできます。

Answer 4

使用するwebpack/hot/dev-server 就可以啊。
我自己总结的 webpackパッケージ構成:
http://yj1438.github.io/2016/...