webpack は optimization_html/css_WEB-ITnose を使用します-htmlチュートリアル-php.cn

はじめに

この記事は webpack の入門記事ではありません。webpack について知らない場合は、「Question Ye's Getting Started with Webpack」または Teacher Ruan の Webpack-Demos を参照してください。

Webpack を使用する理由

React などのモジュラー開発フレームワークと一緒に使用することをお勧めします。
gulp が 400 行のコードで実現できる機能を、160 行のコードでほぼ実現できる、比較的使いやすい構成ベースの構築ツールです。
Webpack はメモリを使用してビルドコンテンツをキャッシュするため、ビルドプロセスが高速になります。

3 番目の点について少し説明したいと思います。以前に書いた「Webpack プラグインの書き方 (1)」を読むと、Webpack はファイルの内容をラージオブジェクトに格納することがわかります。ローダー間のさまざまなプラグイン呼び出しに便利なコンパイル。 gulpもストリーム(パイプ)などのメモリ処理手法を使っていますが、webpackはさらにその先を進んでいるように感じます。 Gulp はタスクごとにストリームを使用しますが、webpack はストリームを共有します。

Webpack 設定の簡単なレビュー

Webpack 設定は主に次の主要なプロジェクト用です:

entry: js エントリソースファイル
output: 生成されたファイル
module: 文字列処理
resolve: ファイルpath
plugins: ローダーより強力なプラグインは、より多くの webpack API を使用できます

一般的に使用されるローダーの紹介

スタイルを処理し、less-loader、sass-loader などの CSS に変換します
URL ローダー、ファイルローダーなどの画像処理。両方を使用する必要があります。そうしないと、サイズ制限を超える画像を対象フォルダーに生成できません
jsを処理し、es6以降のコードをes5のコードに変換します。例: babel-loader、babel-preset-es2015、babel-preset-react
expose-loader の場合、js モジュールをグローバル世界に公開します

よく使用されるプラグインの紹介

コードのホットリプレースメント、 hotmodulereplacementplugin
cssをインラインの代わりにファイルに拡張します。抽出すること、エラーを抽出します。プロセス
複数の HTML が 1 つの js ファイル (チャンク) を共有する場合、CommonsChunkPlugin
を使用してフォルダーをクリーンアップすることができます。Clean
たとえば、js で $ を使用したい場合は、モジュールのエイリアス ProvidePlugin を呼び出します。 webpack の場合、$ を jQuery と一致させる必要があります

package.json のスクリプトに環境変数を設定します。Mac と Windows では設定が異なるので注意してください

"scripts": {    "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",    "publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"}

ログイン後にコピー

webpack.config のプロセスを使用します.js .env.NODE_ENV で判定

最適化ポイント2. コードホットリプレースメントを利用する

1. コードをエントリ js ファイルにインライン化します

2. コードホット置換用のプラグインを開始します

方法 2:

server.js を直接実装し、サーバーを起動します (必須)ホットリプレースメントプラグインを開始します)。以下は私がビジネスで使用する例です。一部の特定のパラメーターは webpack.config.js で直接構成できます。この方法は最も簡単ですが、当然のことながら、柔軟性は自分でサーバーを実装するほど良くありません。

最適化ポイント 3. インポートするとファイルが大きくなり、コンパイル速度が遅くなります。どうすればよいですか?

一緒にパッケージ化せずに分離したい場合は、externals を使用できます。次に、

人気のチュートリアル

詳細>