前戯
あなたが他の種類のファイルを扱うにしたい場合のWebPACK自体は唯一、JavaScriptのモジュールを扱うことができ、あなたは、変換するローダー（ローダー）でのWebPACKに呼ばれているプラグインと組み合わせて使用する必要があります。
ローダ自体が受け付けられたパラメータソースファイルの関数であり、コンバータモジュールとリソースとして理解することができ、戻り値は、変換の結果です。
このように、我々は、CSS、画像など、モジュールを介して任意の種類のファイルをロードしたり要求したり、インポートすることができるようになります。
CSSリソースをパッケージング
スタイル・ローダーとCSS-ローダー依存をインストールするには、CSSリソースをパッケージ化するために、
CSSのCSS-ローダーには、JavaScriptにロードされます。
スタイル・ローダーは、CSSのjavascriptを知ることです
NPM --save-devのスタイル・ローダーCSS-ローダーをインストール
変更webpack.config.jsファイル、モデルパラメータを追加
// モジュールに導入経路ノード、ファイル・パスの処理ガジェット CONST =パスが必要（「パス」） // 由来のWebPACKの特殊なオブジェクトプロパティの設定有する module.exportsはし= { MODE：「なし」、// 指定されたパターン設定： "開発" | "生産" | "なし" @ 入り口の エントリ： './src/main.js'、// 入口モジュールファイルのパス @ アウトレット 出力：{ // パス：' ./dist/」 、エラー、指定するための絶対パス パス：path.join（__ DIRNAME、 './dist/'）、// 絶対場合にパッケージ化の結果は、ディレクトリファイルパスを生成 'bundle.js'：ファイル名 }、 Module1の：{ // モジュールの ルール：[ // ルール { テスト： /\.css$/、// 正規表現マッチングの.cssファイルリソース、引用符 を使用します。[ // ローダーを使用は、順番に注意してくださいすることは間違っていることはできません 「スタイル・ローダー」、 「CSS-ローダー」 ] } ] } }
style.cssを作成し、CSSファイル、CSSフォルダフォルダSRCにフォルダを作成します
style.cssに
本体 { 背景：赤 ;}
のみmain.jsに導入されたのstyle.css
// CSSをインポートすることにより、モジュールは、最終的にbundle.jsにパッケージ、JSの中にパッケージ のインポート」./css/style.css'
再パッケージのコンパイル
NPM実行ビルド
梱包後、道の導入にbundle.js、我々はjsのを発見したCSSスタイルを参照してください
アクセスindex.htmlを、背景を見てみると、赤字にではありません
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換" コンテンツ= "IE =縁" > < タイトル>ドキュメント</ タイトル> </ ヘッド> < ボディ> <> </ スクリプト> </ ボディ> </ HTML >
JavaScriptを実行すると、ソースコードF12のindex.htmlを見直した後、実際には、CSSファイルのJavaScriptモジュールに内容、およびその後、ダイナミックなスタイルは、ページの<head>タグ内の<sytle>タグの役割を使用します。
画像リソースをパッケージング
ファイル・ローダーは、依存を実装されています
NPM --save-devのファイル・ローダーをインストール
修正webpack.config.js
// モジュールに導入経路ノード、ファイル・パスの処理ガジェット CONST =パスが必要（「パス」） // 由来のWebPACKの特殊なオブジェクトプロパティの設定有する module.exportsはし= { MODE：「なし」、// 指定されたパターン設定： "開発" | "生産" | "なし" @ 入り口の エントリ： './src/main.js'、// 入口モジュールファイルのパス @ アウトレット 出力：{ // パス：' ./dist/」 、エラー、指定するための絶対パス パス：path.join（__ DIRNAME、 './dist/'）、// 絶対場合にパッケージ化の結果は、ディレクトリファイルパスを生成 'bundle.js'：ファイル名 }、 Module1の：{ // モジュールの ルール：[ // ルール { テスト： /\.css$/、// 正規表現マッチングの.cssファイルリソース、引用符 を使用します。[ // ローダーを使用は、順番に注意してくださいすることは間違っていることはできません 「スタイル・ローダー」、 「CSS-ローダー」 ] }、 { テスト： /\.(png|svg|jpg|gif)$/、 // 一致するイメージリソース の使用： [ 'ファイルローダ' ] } ] } }
次のクリップ1.JPGプットCSSファイル
変更のstyle.css
本体 { 背景：赤。 背景画像：URL（./ 1.JPG） }
パッケージ化されたコンパイル
NPM実行ビルド
ルートディレクトリへのアクセスでindex.htmlを、背景は表示されませんでした
問題：
- ルートディレクトリ内のindex.htmlに直接アクセスする場合は、パスがへのリソース画像にアクセスすることはできません。
- ソリューション：index.htmlにはdistのディレクトリを置くことです。
- しかし、distのパッケージには、index.htmlのようdistの不適切に、ソースコードではなく、コンパイルの結果です。
- 我々は一度詰めた後ならば、結果のファイル名は、手動でindex.htmlを変更する必要があり、変更さbundle.js。
- 解決するために、HTMLのWebPACK - プラグイン：遭遇した上記の問題点に基づいて、プラグインを使用することができます。
使用HtmlWebpackPluginプラグ
今のディレクトリ構造
役割：問題を解決するためのファイルパス
どこbundle.jsディレクトリにパッケージのindex.html
しかし、また、自動index.htmlを内の<script>組み込まbundle.js
プラグインをインストールします。
NPM --save-devのHTML-WebPACKの-プラグインをインストール
修正webpack.config.js
// モジュールに導入経路ノード、ファイルパスガジェットの処理 CONST =パスが必要（「パス」） // 導入ウィジェット CONST = HtmlWebpackPlugin必要とする（「HTML-のWebPACK-プラグイン」）; // 特別な性質を有するWebPACKの導出構成オブジェクト module.exportsは= { モード：「なし」、// 指定モード設定：「開発」|「生産」|「なし」 // 入口 エントリ：」./src/main.js'、// 入力モジュールファイルパス // エクスポート 出力を：{ // パス： './dist/'、間違って、絶対パスを指定する パスを：path.join（__ dirnameは、 './dist/'）、// 生成されたパッケージ化されたファイルの結果絶対ディレクトリ・パスの場合は ファイル名： "bundle.js' }、 // のconfigureプラグイン プラグイン：[ 新しい新HtmlWebpackPlugin（{ // パッケージテンプレートページを指定 // index.htmlにbundle.jsは、同じディレクトリにパックされます 。// そしてそれが自動的にindex.htmlを使用しますがスクリプトタグはbundle.js導入 テンプレート：「./index.html」 }） ]、 Module1の：{ ルール：[ // 構成変換規則 { テスト： /\.css$/、// なお、単一引用符、正規ではありません表現、マッチングの.cssファイルリソースの 使用：[ // に慣れている外国人のオーダーに応じて、しかししないための間違った 「スタイル・ローダー」、// JS認識CSS 'CSS-ローダー' // CSSコンバートJS ] }、 { テスト： /\.(png|svg|jpg|gif)$/ 、 使用：[ 'ファイルローダ' ] } ] } }
シミュレートされたVUEページの下に、index.htmlに変更します。
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> </ ヘッド> < 身体> <！ <SCRIPT SRC = "./ DIST / bundle.js"> </ SCRIPT> - > < DIV ID = "アプリケーション" > </ DIV > </ ボディ> </ HTML >
再パッケージ化
NPM実行ビルド
実行した後、あなたはdistのディレクトリの下のindex.html以上があることがわかりますし、ファイルを自動的bundle.jsで
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> </ ヘッド> < 身体> <！ <スクリプトSRC = "./ DIST / bundle.js "> </ SCRIPT> - > < divのID ="アプリ" > </ divの> < スクリプトタイプ= "テキスト/ javascriptの" SRC = "bundle.js" > </ スクリプト> </ ボディ> </ HTML >
実行DIST / index.htmlのファイルは、それが通常の背景が表示されます。ルートディレクトリ内のindex.htmlを実行しないでください
