目次
分割構成
通常、設定は 3 つのファイルに分かれています。
- webpack.common.js はパブリック設定に使用されます。
- webpack.dev.js は開発環境の構成に使用されます。
- webpack.prod.js は実稼働環境の構成に使用されます。
webpack-merge の導入により、開発環境と本番環境は共通の構成でマージする必要があります
クロスドメインプロキシ
Webpack でドメイン間で他のインターフェイスをリクエストするにはどうすればよいですか?
面接でよくある質問
たとえば、フロントエンド ポートが 8080 でサーバー ポートが 3000 の場合、リクエスト中にフロントエンドが直接 3000 をリクエストすると、クロスドメイン リクエストは利用できなくなります。この場合、プロキシを使用できます。 。
ES6 (バベルローダー) の処理
.bebelrc を設定する必要があります
ハンドルのスタイル
postcss-loader、CSS ブラウザーの互換性を処理します。
less-loader
css-loader
style-loader
postcss-loaderを使用する場合は、postcss.config.jsを設定する必要があります
画像の処理 (ファイルローダー)
開発環境
本番環境
複数の入り口
パブリック設定エントリで複数のエントリを設定する
CSSファイルを抽出する
CSS ファイルを抽出すると、CSS スタイルが外部リンク ファイルの形式で導入されます。
CSS が抽出されていない場合は、CSS が配置されます。< a i=2> 中<style>
线上打包，必须抽离CSS文件
パブリック コードとサードパーティ コードを分離する
2 つのファイルは同じモジュールを導入し、2 回パッケージ化されます
サードパーティ モジュール
lodash ファイルが大きい
ビジネス コードを変更するたびに、lodash を再パッケージ化する必要がありますが、lodash は変更されていないため、再パッケージ化する必要はまったくありません
Lodash は分離して個別にパッケージ化する必要があります。ビジネス コードが変更されると、loadsh はキャッシュにヒットし、読み込みが速くなります。
チャンクとキャッシュのサブレット化
minSize を設定すると、サードパーティ モジュールを個別にパッケージ化できるサイズを制限できます
ファイルが非常に小さい場合は、ファイルを抽出せずにビジネス コードとともに直接パッケージ化できます。
minChunks: 2 // パブリック モジュールは少なくとも数回再利用されています
たとえば、パブリック モジュールが少なくとも 2 回再利用されている場合は、それを抽出して、数学など、個別にパッケージ化
遅延読み込み
遅延読み込みでもチャンクが生成されます
JSXの処理
@babel/プリセット反応
ハンドルビュー
vueローダー
モジュールチャンクバンドルの違い
- モジュール - 各ソース コード ファイル。webpack 内のすべてがモジュールです。
(CSS JS 画像など、タイプに関係なく、インポートできるファイルはモジュールです)< /span> - chunk - 複数のモジュールがマージされます。entry、import()、splitChunk などでチャンクを生成できます。
- バンドル - 最終出力ファイル
ビルド速度を最適化する
バベルローダーの最適化
キャッシュを有効にする:cacheDirectory を使用します。ES6 コードが変更されていない限り、コードは再コンパイルされず、キャッシュされます。
2 回目のコンパイル時に、キャッシュは変更されていない部分に使用されます
女性プラグイン
- IngorePlugin を使用して不要なファイルを無視する
例: moment は複数の言語をサポートしますが、中国語のモジュールのみを導入するにはどうすればよいですか?
// moment の /locale ディレクトリを無視します
new webpack.IgnorePlugin(/./locale/, /moment/)
// 言語パックをビジネス コードに動的に導入する
import 'moment/locale/zh-cn'
- noParse避免重复打包
module: {
noParse: [/react.min.js$/]
}
違い: IgnorePlugin は直接導入されず、コードには含まれません
noParse (モジュール化された vue.min.js に似ています) は導入されますが、パッケージ化されません
ハッピーパック
1.js シングル スレッド、マルチプロセス パッケージ化を有効にする
2. 構築の進捗を改善する
// ステップ 1 module.rules の下で、.js ファイルを ID ラベルを持つ HappyPack インスタンスに渡します
{ テスト: /.js$/、 使用: ['happypack/loader?id=babel'] }< /span>
// ステップ 2 happyPack によりマルチプロセス パッケージングが可能になります
new HappyPack({ id: ‘babel’、 ローダー: [‘babel-loader?cacheDirectory’] })
ParallelUglify マルチプロセス圧縮 JS
- webpack の組み込み Uglify ツールは JS を圧縮します
- JS シングルスレッド、マルチプロセス圧縮を高速化
- happyPack と同じ
開発環境で圧縮を使用する
- プロジェクトが大きくなり、パッケージ化が遅くなります。複数のプロセスを有効にすると速度が向上します。
- プロジェクトは小さく、迅速にパッケージ化されます。複数のプロセスを有効にすると速度が低下します (プロセスのオーバーヘッド)。
- 必要に応じて使用する
ホットアップデート
- 自動更新: Web ページ全体が更新されますが、速度は遅いです
- 自動更新: ステータスが失われます (フォーム内のデータが失われます)
- ホット アップデート: 新しいコードが有効になり、Web ページは更新されず、ステータスは失われません。
ホット アップデートの設定
ホット アップデートが必要なモジュールを自分で設定する
適用環境
webpack はビルド速度を最適化します
（可用于生产环境）
- babel-loader を最適化する
キャッシュは開発環境で使用され、本番環境では基本的に使用されません。
include exclude を使用して、範囲 - IgnorePlugin
一部のモジュールの導入を避けてください
使用しないと、何らかの問題が発生する可能性があります。パッケージの容量が大きくなり、パッケージ化が難しくなります。ゆっくりしてください - noParse
一部のもののパッケージ化を避け、実稼働環境でのパッケージ化の速度を上げます - ハッピーパック
- ParallelUglifyPlugin (本番環境で使用する必要があり、コードは圧縮されています)
Webpack はビルド速度を最適化します
（不可用于生产环境！） - 自動更新
- ホットアップデート
- DLLプラグイン