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

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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Webpack で css-loader と less-loader を使用するチュートリアル
  • webpack の scss と postcss-loader の設定の詳細な説明
  • Webpackローダーファイルローダーの詳細な説明
  • Webpack は、インライン スタイル px を vw に変換するローダーの例を実装します。
  • webpackローダーとプラグインの書き方の詳しい説明
  • webpack2.0 で postcss-loader を設定する方法
  • webpackカスタムローダーの詳細な説明
  • Webpack3 ローダーの完全分析

<<:  MySQL の暗号化と復号化の例

>>:  ウェブページ経由で jar パッケージを Nexus にアップロードする方法

推薦する

mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...

MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...

Axios を使用して Vue2 がリクエストを開始する詳細なプロセス記録

目次序文Axiosのインストールと設定シンプルなGETリクエストを開始するPOSTリクエストを行うシ...

コード例を通してページ置換アルゴリズムの原理を理解する

ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...

MySQLの明示的な型変換の簡単な分析

CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...

Dockerコンテナの状態変換の実装

Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...

MySQL SELECT文の実行方法

MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...

FileZilla_Server:425 データ接続を開けない問題を解決する方法

FileZilla Serverをサーバーにインストールすると、425データ接続を開けない問題が発生...

HTML Web ページ リスト タグ学習チュートリアル

HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...

Linuxはscpコマンドを使用してファイルをローカルコンピュータにコピーし、ローカルファイルをリモートサーバーにコピーします。

以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...

MySQLの文字セットを変更する方法

1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

mysql のインデックスと FROM_UNIXTIME に関する問題

ゼロ、背景今週の木曜日にたくさんのアラートを受け取りました。DBA に確認を依頼したところ、遅いクエ...