Webpack でよく使われる 12 個の Loader を共有する (要約)

序文

本来の意図: 一般的に使用されるローダーを整理して全員と共有し、どのシナリオでどのローダーを使用するかがわかるようにすること。もし静かに左にスワイプする方法を知っている大物が世の中にいたら、それが気に入らなくても私を批判しないでください。
適している人: ジュニアフロントエンド開発者。

スタイルローダー

目的: コンパイルされた CSS スタイルをページスタイルタグにマウントするために使用されます。ローダーが実行される順序に注意する必要があります。ローダーは下から上に実行されるため、スタイルローダーが最初に配置されます。最後に、すべてのコンパイルが完了し、インストールのためにスタイルにマウントされます。

cnpm i スタイルローダー -D

構成
config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.css/,
    使用: ["style-loader"]
   }
  ]
 }
}

CSSローダー

目的: .css ファイルを識別するために使用されます。css を処理するには、style-loader と一緒に使用する必要があります。css-loader のみがインストールされている場合、スタイルは有効になりません。
インストール

cnpm i css-loader スタイルローダー -D

構成
config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.css/,
    使用： [
     「スタイルローダー」、
     「CSSローダー」
    ]
   }
  ]
 }
}

sassローダー

目的: プロジェクト開発でよく使用する CSS プリプロセッサ。CSS を書くのに非常に便利です。一言で言えば、「素晴らしい」です。
インストール

[email protected] node-sass -D を実行します。

構成
インデックス

「index.scss」をインポートします

インデックス.scss
体 {
 フォントサイズ: 18px;
 背景: 赤;
}

config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.scss$/,
    使用： [
     「スタイルローダー」、
     「cssローダー」、
     「sassローダー」
    ]、
    インクルード: /src/、 
   },
  ]
 }
}

postcssローダー

目的: CSS スタイルのさまざまなブラウザカーネルプレフィックスを補足するために使用されます。非常に便利で、手動で記述する必要がありません。
インストール

cnpm i postcss-loader オートプレフィックス -D

構成
ポストcss.config.js

ファイルに記述しない場合は、postcss-loader のオプションに記述することもできます。ファイルに記述することは、そこに記述することと同じです。

モジュール.エクスポート = {
 プラグイン: [
  require("自動プレフィックス")({
   overrideBrowserslist: ["> 1%", "最新 3 バージョン", "ie 8"]
  })
 ]
}

財産	説明する
> 1%	世界人口の1%以上が使用するブラウザ
CNでは5%以上	指定国での使用範囲
最後の2つのバージョン	CanIUse.com で追跡されているように、すべてのブラウザは最新の 2 つのバージョンまで互換性があります。
Firefox ESR	Firefoxの最新バージョン
ファイアフォックス > 20	ブラウザのバージョン範囲を指定する
つまり、<=8 ではない	方向により一部のバージョンが除外されます
ファイアフォックス12.1	指定されたバージョンへのブラウザ互換性を指定します

config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.scss$/,
    使用： [
     「スタイルローダー」、
     「cssローダー」、
     「sassローダー」、
    「postcssローダー」
    ]、
    インクルード: /src/、 
   },
  ]
 }
}

バベルローダー

目的: Es6+ 構文を Es5 構文に変換します。
インストール

cnpm と babel-loader @babel/core @babel/preset-env -D

babel-loader これはbabelとwebpackを連携させるモジュールです
@bable/core これはBabelコンパイラのコアモジュールです
@babel/preset-env これはBabelが公式に推奨するプリセッターで、ユーザーの環境に応じてEs6コードをコンパイルするために必要なプラグインとパッチを自動的に追加できます。

構成
config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.js$/,
    使用： {
     ローダー: "babel-loader",
     オプション:
      プリセット: [
       ['@babel/preset-env', { ターゲット: "defaults"}]
      ]
     }
    }
   },
  ]
 }
}

tsローダー

目的: プロジェクトTypescriptの設定に使用
インストール

cnpm i ts-loader typescript -D

構成
config.js は、
ts-loader の現在の設定は有効にならず、.ts ファイルのコンパイルと認識のみを行います。メインの設定ファイルは tsconfig.json にあります。

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.ts$/,
    使用: "ts-loader"
   },
  ]
 }
}

tsconfig.json

{
 "コンパイラオプション": {
  「宣言」: true、
  "declarationMap": true, // マップファイルのデバッグを有効にする "sourceMap": true,
  "target": "es5", // Es5構文に変換}
}

config.js は、

モジュール.エクスポート = {
 エントリ: "./src/index.ts",
 出力: {
  パス: __dirname + "/dist",
  ファイル名: "index.js",
 },
 モジュール: {
  ルール:
   {
    {
     テスト: /\.ts$/,
     使用: "ts-loader",
    }
   }
  ]
 }
}

htmlローダー

目的: HTML ページのコードスニペットをインポートして、DOM 要素のコンテンツに割り当てたい場合があります。この場合、html-loader が使用されます。
インストール

cnpm と [email protected] -D

上位バージョンでは互換性がなくなりエラーが発生する可能性があるため、下位バージョンをインストールすることをお勧めします。 0.5.5バージョン構成をここにインストールしました
インデックス

「../template.html」からコンテンツをインポートします。

document.body.innerHTML = コンテンツ

config.js は、
モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.html$/,
    使用方法: "html-loader"
   }
  ]
 }
}

ファイルローダー

目的: jpg、png、その他の画像などのファイルタイプリソースを処理するために使用されます。戻り値は publicPath に基づきます。
インストール

cnpm i ファイルローダー -D

構成
インデックス

「./pic.png」からimgをインポートします。
console.log(画像) // https://www.baidu.com/pic_600eca23.png

config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.(png|jpg|jpeg)$/,
    使用： [
     {
      ローダー: "ファイルローダー",
      オプション:
       名前: "[名前]_[ハッシュ:8].[拡張子]",
       パブリックパス: "https://www.baidu.com" 
      }
     }
    ]
   }
  ]
 }
}

URLローダー

目的: url-loader も画像タイプのリソースを処理しますが、file-loader とは少し異なります。url-loader は、画像サイズに基づいて異なる操作を設定できます。画像サイズが指定されたサイズより大きい場合、画像はリソースとしてパッケージ化され、それ以外の場合は、画像は base64 文字列に変換され、インストール用の js ファイルにマージされます。

cnpm と url-loader -D

構成
インデックス

「./pic.png」からimgをインポートします。

config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.(png|jpg|jpeg)$/,
    使用： [
     {
      ローダー: "url-loader",
      オプション:
       名前: "[名前]_[ハッシュ:8].[拡張子]",
       limit: 10240, // ここでの単位は (b) 10240 => 10kb
       // 10kb 未満の場合、base64 に変換されて js ファイルにパッケージ化されます。10kb より大きい場合は、dist ディレクトリにパッケージ化されます。}
     }
    ]
   }
  ]
 }
}

html-withimg-loader

目的: 画像をコンパイルするときに、file-loader と url-loader を使用します。これら 2 つのローダーは、js ファイル内の関連する画像リソースを検索しますが、html 内のファイルは検索されません。そのため、画像を html でもパッケージ化する必要があります。この場合、html-withimg-loader を使用します。
インストール

cnpm と html-withimg-loader -D

構成
インデックス.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ホーム</title>
</head>
<本文>
 <h4>私はフロッグマンです</h4>
 <img src="./src/img/pic.jpg" alt="">
</本文>
</html>

config.js は、
パッケージ化中にimgのsrcパスが[オブジェクトモジュール]として表示される場合、解決策は次のようになります。

ファイルローダーを 4.2.0 にダウングレードする
オプションパラメータesModuleをfalseに変更します

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.(png|jpg|jpeg)$/,
    使用： {
     ローダー: "ファイルローダー",
     オプション:
      名前: "[名前]_[ハッシュ:8].[拡張子]",
      パブリックパス: "http://www.baidu.com",
      esModule: 偽
     }
    }
   },
   {
    テスト: /\.(png|jpeg|jpg)/,
    使用方法: "html-withimg-loader"
   }
  ]
 }
}

vue-loader

目的: .vue ファイルをコンパイルするために使用されます。独自の vue プロジェクトを構築する場合は、vue-loader を使用できます。以下で簡単に見てみましょう。ここでは詳細には触れません。
インストール

cnpm i [email protected] vue vue-template-compiler -D

vue-loaderは.vueファイルを識別するために使用されます
vue 言うまでもなく、認識はvue構文をサポートしています
vue-template-compiler 構文テンプレートレンダリングエンジン {{}} テンプレート、スクリプト、スタイル

構成
メイン.js

「./index.vue」からアプリをインポートします。
'Vue' から Vue をインポートします
新しいVue({
 el: "#app",
 レンダリング: h => h(App) 
})

インデックス.vue

<テンプレート>
 <div class="index">
 {{メッセージ}}
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'インデックス',
 データ（） {
 戻る {
  メッセージ: 「こんにちは、フロッグマン」
 }
 },
 作成された() {},
 コンポーネント: {},
 時計： {}、
 メソッド: {}
}
</スクリプト>
<スタイルスコープ>

</スタイル>

config.js は、

const VueLoaderPlugin = require('vue-loader/lib/plugin')
モジュール.エクスポート = {
 エントリ: "./src/main.js",
 出力: {
  パス: __dirname + "/dist",
  ファイル名: "index.js",
 },
 モジュール: {
  ルール:
   {
    テスト: /\.vue$/,
    使用: "vue-loader"
   }
  ]
 },
 プラグイン: [
  新しい VueLoaderPlugin()
 ]
}

eslintローダー

目的: コードが仕様に準拠しているかどうか、構文エラーがないかどうかを確認するために使用されます。
インストール

cnpm と eslint-loader eslint -D

構成
インデックス.ts

var abc:any = 123;
コンソールログ(abc)

.eslintrc.js
ここにいくつかの簡単なルールがあります

モジュール.エクスポート = {
 ルート: true、 
 環境: {
  ブラウザ: true、
 },
 ルール:
  "no-alert": 0, // アラートを無効にする
  "indent": [2, 4], // インデントスタイル "no-unused-vars": "error" // 変数宣言には } を使用する必要があります
}

config.js は、

モジュール.エクスポート = {
 モジュール: {
  ルール:
   {
    テスト: /\.ts$/,
    使用: ["eslint-loader", "ts-loader"],
    強制: "事前"、
    除外: /node_modules/
   },
   {
    テスト: /\.ts$/,
    使用: "ts-loader",
    除外: /node_modules/
   }
  ]
 }
}

要約する

Webpackでよく使われる12個のLoaderの共有（まとめ）に関するこの記事はこれで終わりです。Webpackでよく使われるLoaderに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: