Webpack ピットへの旅 (2)loader_html/css_WEB-ITnose の使用を開始する

はじめに

前回のブログでは、2 つのファイルをわずか数行のコードで結合し、first.js とentry.js が webpack を使用して、単純なものを複雑にすることに成功しました。パッケージ ファイルを使用して、bundle.js を生成します。

Webpack ができることはこれだけであり、Webpack が処理できるのは JavaScript モジュールのみです。

もちろん、これしかできないのであれば、それほど人気はありません =_=。したがって、他のローダーを導入することで、他の種類のファイルを処理できます。

ローダーの紹介

ローダー自体は、ソースファイルをパラメータとして受け取り、変換結果を返す関数です。このようにして、VUE、JSX、SASS、イメージなど、require を通じてあらゆる種類のモジュールやファイルをロードできます。

まず、ローダーにはどのような機能があるのか​​見てみましょう。 (オンラインにコピーされているので、気に入らない場合はスキップしてください。アドレス)

• ローダーはパイプラインを通じてチェーンでき、リソースを任意の形式に変換して次のローダーに渡すことができます。しかし最終的には、ローダーは JavaScript を返さなければなりません。
• ローダーは同期または非同期で実行できます。
• ローダーはnode.js環境で実行されるため、可能な限りのことができます。
• ローダーは、設定項目をローダーに渡すパラメーターを受け入れることができます。
• ローダーは、ファイル拡張子 (または正規表現) によってさまざまなタイプのファイルにバインドできます。
• ローダーは npm 経由で公開およびインストールできます。
• 共通モジュールは、package.json の main で指定するだけでなく、ローダーをエクスポートして使用することもできます。
• ローダーは構成にアクセスできます。
• プラグインを使用すると、ローダーにさらに多くの機能を持たせることができます。
• ローダーは添付された任意のファイルを配布できます。

ローダーの使用

インストール

上記のローダーの知識によると、このようにコンパイルすることは絶対に不可能なので、css ファイルを読み込むためにインストールします css -loader を指定し、style-loader を使用してページに挿入します。

コマンドラインに次のように入力します:

npm install css-loader style-loader --save-dev

package.json では、主に devDependency フィールドが変更されています:

"devDependencies": {    "css-loader": "^0.23.1",    "style-loader": "^0.13.0",    "webpack": "^1.12.2"}

もちろん、実行後に、対応する依存関係 (上記のコードなど) を package.json に直接追加することもできます。コマンドラインで npm install を実行すると、対応する依存関係が自動的にインストールされます。

インストールが完了しました。

CSS ファイルを読み込みます

前回のブログのファイルのまま、CSS ファイルを追加します。 style.css に

body {    background: red;}

を追加して、entry.js を変更します。元のファイルは変更されず、 require("!style!css!. / style.css");、CSS ファイルの導入に使用されます。

コンパイルを続けましょう:

webpack entry.js bundle.js

完了したら、ページを更新してください。背景色は赤に変わりましたか?

拡張機能は自動的にローダーにバインドされます

これがローダーの使用方法です。 CSS ファイルが必要になるたびにローダー プレフィックス !style!css! を記述する必要がある場合、明らかに非常に面倒です。モジュールタイプ (拡張子) に基づいて必要なローダーを自動的にバインドするために必要です。

もっと簡単な方法を見てみましょう。entry.js の require("!style!css!./style.css") を require("./style.css") に変更します。背景色を付けると、変化がよりわかりやすくなります。次に、

webpack entry.js bundle.js --module-bind "css=style!css"

を実行します。 。

。 。 。

うまくいきませんでした!

コマンドラインでは ! は特別な意味を持っているため、エスケープする必要があります。もう一度試してください:

webpack ./entry.js bundle.js --module-bind "css=style\!css"

成功すると、背景が再び変化することが確認できるはずです。

この方法で複数の CSS ファイルをコンパイルしてパッケージ化することはできますが、これほど長いコマンドのリストを毎回実行したくない場合は、どうすればよいでしょうか。そのまま下り続けてください。