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 にアップロードする方法

推薦する

Vueでデータ例を定義する方法

序文開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応...

Docker で最初のアプリケーションをデプロイする方法

前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...

Vue で Graphql インターフェースを実装する例

注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

Jenkins の docker-compose デプロイメントと構成に関する詳細なチュートリアル

Docker-compose デプロイメント構成 Jenkins 1. Docker-compose...

Win10 システムに MySQL8.0.13 をインストールする際の問題と解決策

オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

webpackが静的リソースキャッシュを実装する方法

目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

VMware を使用して PXE バッチ インストール サーバーをテストする詳細なプロセス

目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...

NginxはURLのパスに応じてアップストリームに動的に転送します

Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

HTML と JavaScript を使用してローカル メディア (ビデオとオーディオ) ファイルを再生する方法

まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...

Jsonフォーマットの詳細な説明

目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....