シーケンス

彼は、CSS、SCSS、HTMLのパッケージ側面の自動生成、CSSの抽出を追加するために、今、基本を取るために棚の上に置かれています。WebPACKのデフォルトはJSモジュールを扱うので、他の種類のファイルを変換することができます行われる必要がある、とローダは右ステップのもので、このステップを完了しようとし、このことを行うために正確です。

1、インストールnormalize.css

　　normalize.cssスキームは、CSSのリセットに代わるものです。これは、デフォルトのHTML要素のスタイルでブラウザ間で一貫性の高い学位を提供します。伝統的なCSSのリセットと比較すると、Normalize.cssは、高品質の代替のためのHTML5の準備ができて、近代的です。

1 NPM -D normalize.cssをインストール

main.jsで導入

1つのインポート'normalize.css'

パッケージングは現在ありませんインストールCSS-ローダー、スタイル・ローダーので、エラーでなければなりません

2、取り付けCSS-ローダー、スタイルローダー

1つの NPM I-D CSS-ローダースタイルローダー

ローダー設定関連

webpack.config.jsオブジェクトモジュールを増やし、構成モジュールは、にしたがって文字通りあります

1  モジュール：{
 2つの     ルール：[
 3        {
 4          試験：/\.css$/ 、
 5          使用：[
 6            {ローダ： 'スタイルローダ' }、
 7            {ローダ： 'CSS-ローダ' }
 8          ]
 9        }
 10      ]
 11    }

対象となるwebpack.config.jsモジュール構成ファイル属性は、この属性にプロパティルールを追加、属性値が配列され、各アレイは、オブジェクトのメンバーである、異なるルールが設定できます。

テスト：テストは別の種類のファイルを正規表現マッチングされた後
使用します。このファイルを一致させるときに、このルールでは、ローダの種類をファイルにマッチしたハンドルに、受信アレー、意味のある使用彼は、ファイルにマッチしたとき、それはローダーの多くは、これらのファイルに対処することができます。
我々は、デフォルトのコンフィギュレーション・ローダー、直接文字列（ローダに相当）を使用している場合は、オブジェクトを使用する必要があり、追加のローダーを設定する必要がある場合に使用することは、文字列やオブジェクトでもよいように、することができます

1 {テスト：/\.css$/、使用： 'CSSローダ' }
 2  // 等価
3。 {テスト：/\.css$/ 、使用：[{
 4。    ローダ： 'CSSローダ'
 。5  }] }

：ローダは、このような、除外含まれ、かつ特異的に参照するなど、いくつかの他の属性になりますhttps://webpack.js.org/configuration/module/

ローダーの役割

スタイル・ローダモジュールは、スタイルのように導出DOMに追加されます
CSS-ローダーは、読み込みロードとリターンCSSコードを使用して、CSSファイルを解析し、
LESSファイルをロードし、翻訳するあまりローダー
ロードするSASSローダおよび翻訳SASS / SCSSファイル
PostCSS翻訳CSS / SSSファイルをロードし、使用するpostcssローダー
文書や翻訳スタイラスをロードするためのスタイラスローダー

Loaderのロードシーケンスが右から左にあり、順序が逆方向に書かれてはいけません。

今のコマンドをパッケージ実行し、あなたが正常にパッケージ化することができるはずですが、そこにはHTMLはありませんので、私は、ブラウザの起動で実行することはできませんので、することは、当然のことながら、我々は手動でdistディレクトリにHTMLファイルを作成することができますし、手動導入パッケージ化に成功JSが、これはあまりにも面倒です私は、パッケージが自動的にHTMLに生成されたときにことを願っています、とCSSの自動包装の導入。

私たちは、上記のことを行うために私たちを助けるために、組み込みのHtmlWebpackPlugin WebPACKのプラグインを使用することができます

3、安装HtmlWebpackPlugin、クリーンWebPACKの-プラグイン

1つの NPM I-Dのhtml-のWebPACK-pluginのクリーンWebPACKの-プラグイン

HTML-のWebPACK -プラグイン：使用するあなたはHTML5のドキュメントを構築します。このプラグインは、scriptすべてのあなたのWebPACKのバンドルにタグが含ま

クリーンのWebPACK  - プラグイン：主に毎回クリーンアップdistディレクトリをパックするために使用され、私はそこにしたくないも前に、パッケージ化されたファイルを保持します

同じディレクトリmain.jsにhtmlファイルを作成します

webpack.config.jsは、プラグインを設定します

1つの プラグイン：[
 2      新しい新CleanWebpackPlugin（）、
 3。     新しい新しいhtmlWebpackPlugin（{
 4。        タイトル： '足場から' 、
 5        テンプレート： './index.html'
 6      }）
 。7    ]

SCSS、インストールノード-SASS SASS-ローダーの増加をサポート

1つの NPM iがノードSASS SASSローダ-D

srcディレクトリのスタイルディレクトリ内の関連文書、ルール内で共感増加変換SCSSファイルのSCSSの確立

1  {
 2          テスト：/\.scss$/ 、
 3          使用：[{
 4            ローダ： 'スタイルローダ'
 5          }、{
 6            ローダ： 'CSS-ローダ'
 7          }、{
 8            ローダ： 'サスローダ'
 9          }]
 10        }

図4に示すように、CSSを抽出するために別個のファイル

インストールミニCSS-エキス - プラグイン

最適化ローダー設定する前に、ローダー設定の前に（ようにCSS-ローダー、スタイル・ローダーと何回も書き込む）多少の繰り返しは、実際には、限り、テストの正規表現は、下のように最適化することができることができているので：

1  Module1の：{
 2      の規則：[
 3        {
 4          試験：/\.(sa|sc|c)ss$/ 、
 5。         使用：[
 6            {
 7              ローダ：miniCssExtractPlugin.loader、
 8            }、
 9            'CSS-ローダー' 、
 10            'サスローダ' 、
 11          ]、// 左右開始処理に
12        }
 13      ]
 14    }

再パッケージは、以下の図を参照してください必要があります

ソース

https://github.com/ben-Run/webpack-learn

あなたは次のスターを指すように助けることができる場合は、ハハ~~~

足場を構成することから、SCSSローダー設定のCSSを構築するための基礎をwebpack4.x（B）を学びます