- 指定したパスに画像ファイルパッケージから引き出さ
- 圧縮の写真は、リソースから引き出さ
- HTMLの画像のパスを生成するように構成されました
まず、テスト環境を準備します
// ワークスペース SRC // フォルダ index.js // エントリファイル index.css // 形式のファイル index.htmlを// 構造ファイルの 画像// ピクチャフォルダの package.json // 構成パッケージ環境情報 webpack.config。 JS // パッケージのプロフィール
まず第一には、パッケージ化されたプラグイン（画像ファイルを処理するために使用される、ここでパックされていないファイル）を用意する必要があります。
1 "クリーンのWebPACK-プラグイン"： "^ 3.0.0"、// buildフォルダクリア 2 "CSS-ローダーを"： "^ 3.0.0"、// CSSファイルをロードするために使用する 3 「HTML-のWebPACK -プラグイン"：" ^ 3.2.0 " // 使用するには、htmlファイルを引っ張った 。4 ：^ 0.23.1 " ""スタイル・ローダー" // 行のCSSスタイルパターンの間で変換するために使用される 5。 "とのWebPACK "：" ^ 4.35 0.2」、// ツールを紐で縛る 。6 "のWebPACK-CLI "：" ^ 3.3.5" // ツールのパック命令セット
上記のコメントを通して、あなたは上記の構成は、画像リソースをパッケージ化することはできません見ることができるので、上記のテストパッケージのプラグイン構成と成功の場合に参照スタイル写真CSSのパスに表示されていない、HTMLで画像のパスがで導入します写真を見つけないかもしれません（パス一貫性のないパッケージ）をパッケージ化した後、処理のための時間を持っていませんHTMLファイルのパスを抽出します。
1つ のvar =（ 'パス'を必要とするパス）。 2 VAR {CleanWebpackPlugin} =（ 'クリーンWebPACKの-Plugin'を必要とします）。 3 VAR HtmlWebpackPlugin =必要とする（ 'HTML-のWebPACK-プラグイン' ）。 4 module.exportsは= { 5 エントリー：{ 6 度： './ SRC / index.js' 7 }、 8 出力：{ 9 パス：path.resolve（__ DIRNAME、 'DIST' ）、 10 名：' [名] [ハッシュ：5] .bundle.js' 11 }、 12 モジュール：{ 13の 規則：[ 14 { 15 試験：/ \ CSS用の$ /。 、 16 使用：[ 17 {ローダ： 'スタイルローダ' }、 18 {ローダ： 'CSS-ローダ' } 19 ] 20 } 21 ] 22 }、 23個の プラグイン：[ 24 新しいCleanWebpackPlugin（）、 25 新しいHtmlWebpackPlugin（{ 26 テンプレート： './ SRC / index.htmlを' 27 }） 28 ]、 29 モード： '開発' 30 }
上記のテスト環境の場合は、紛れも正式に入力されたWebPACKのエキス画像ファイル操作を詰め。
第二に、指定したパスに画像ファイルのパッケージを引き抜きます
上記で調製に基づいてパッケージ構成の2つのローダー・プラグインを追加します。
NPMのurl-ローダーをインストール--save- DEV
NPMファイルをインストール --save-devの-loader
次に、このステップは以下のconfig.jsのにこの設定ファイルを追加し、パスのCSSコードに画像を追加することができます。
1 Module1の：{ 2つ の規則：[ 3 { 4 テスト:. / \（PNG | JPG | JPEG | GIF）$ / 、 5 使用：[ 6。 { 7。 ローダ： 'URLローダ' 、 8つの。 オプション：{ 9。 名： '[名] [ハッシュ:. 5] [EXT]。'、// 名前を設定パック画像を引っ張っ- [EXT]サフィックスの画像取得するために使用される 10 限界：100000、// 画像サイズ<= 100キロバイトがBASE64であります符号化は、（ファイルにパッケージ100キロバイト未満JS） -画像のサイズに応じて試験したときに調整される 11。 OutputPath：「イメージ」// 同じ主入口パスに出力フォルダ名、フォルダやファイルを設定 12 } 13 } 14 ] 15 } 16 ] 17 }
また、この構成では、画像引かcssファイルで設定することなく、単に圧縮された画像ファイルを構成する方法を参照して、その後、ではなく、画像圧縮処理を引き抜くことができます。
第三に、圧縮された画像リソースから引き出さ
前のステップに続いて、必要な画像圧縮ローダーをダウンロードしてインストールします。
NPM IMG-ローダーをインストール--save- DEV NPMインストールimagemin -loader --save- DEV NPMインストールimagemin -pngquant --save-devの
次いで、それをより良いコードのコード構造を示すサンプルコードセクションは、前のステップを重複するために、圧縮及びプラグの関連ビューをロードするローダモジュールの画像リソース（正規サフィックスマッチング画像）を添加しました。
1 Module1の：{ 2つ の規則：[ 3 { 4 テスト:. / \ CSS $ / 、 5。 使用：[ 6 {ローダ： 'スタイルローダ' }、 7。 {ローダ： 'CSSローダ' } 。8 ] 。9 }、 10 { 。11 テスト:. / \（PNG | JPG | JPEG | GIFは）$ / 、 12は、 使用：[ 13です { 14 ローダー： 'URL-ローダー'、// ファイルのリソース・パス・ローダーを画像には、引っ張っ 15 オプション：{ 16 名： '[名] [ハッシュ:. 5] [EXT]'、// 取り外しパッケージ化画像の名前を設定する-画像を取得するために使用される[EXT]サフィックス 。17 限界：100000、// 制限画像-画像サイズの調整に従って試験した場合サイズ<= 100キロバイトbase64エンコード（100キロバイト下のファイルにパッケージ化JS）が 18である 「画像」は：OutputPath // 同様に、メイン・エントリ・ファイル出力フォルダ名でフォルダパスを提供します 19 } 20 } 21である { 22は ローダー： 'IMG-ローダー'、// 画像圧縮のためのリソースローダ用画像 23はある {：オプション 24個 のプラグイン：//画像ウィジェットにリソースローディング構成 25 ザは、（ 'imagemin-pngquantの'）必要（{ // 画像圧縮imagemin-pngquantのため、暗黙コールローダローダimageminある 26である 品質：[0.3、0.5] // 画像圧縮30％50％ 27 }） 28 ] 29 } 30 } 31 ] 32 } 33 ] 34 }
最後に、htmlファイルに何の参照画像処理を残しません。
第四に、HTMLの画像経路を生成するように構成されました
ローダhtmlファイルを設定し、アプリケーション・イメージタグを設定し、属性名では、HTMLリソースの写真は、処理のためのアプリケーション・ローダーに追加されます（圧縮を含むと上記の写真を取り出した）、最初のダウンロードの決意をローダhtmlファイル：
NPMのhtml-ローダー--save-devのインストール
（構成以下）config設定：
1 Module1の：{ 2つ の規則：[ 3 { 4。 試験:. / \ HTML $ / 、 5。 使用：[ 6 { 7。 ローダ： 'HTMLローダ' 、 8 オプション：{ 9 ATTRS：[ 'IMG：SRC'] / / 設定ファイルsrc属性値IMG HTMLタグ 10 } 11 } 12 ] 13であり、 14 } 15 ] 16 }
最後に、各画像圧縮フォーマットの構成が異なる圧縮プラグインは、プラグインNPM詳細なリファレンスマニュアルがあること、同じではないことに留意すべきである。https://www.npmjs.com/package/img-loader
