序文本来の意図: 一般的に使用されるローダーを整理して全員と共有し、どのシナリオでどのローダーを使用するかがわかるようにすること。もし静かに左にスワイプする方法を知っている大物が世の中にいたら、それが気に入らなくても私を批判しないでください。 スタイルローダー目的: コンパイルされた CSS スタイルをページ スタイル タグにマウントするために使用されます。ローダーが実行される順序に注意する必要があります。ローダーは下から上に実行されるため、スタイル ローダーが最初に配置されます。最後に、すべてのコンパイルが完了し、インストールのためにスタイルにマウントされます。 cnpm i スタイルローダー -D 構成 モジュール.エクスポート = { モジュール: { ルール: { テスト: /\.css/, 使用: ["style-loader"] } ] } } CSSローダー目的: .css ファイルを識別するために使用されます。css を処理するには、style-loader と一緒に使用する必要があります。css-loader のみがインストールされている場合、スタイルは有効になりません。 cnpm i css-loader スタイルローダー -D 構成 モジュール.エクスポート = { モジュール: { ルール: { テスト: /\.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 構成 ファイルに記述しない場合は、postcss-loader のオプションに記述することもできます。ファイルに記述することは、そこに記述することと同じです。 モジュール.エクスポート = { プラグイン: [ require("自動プレフィックス")({ overrideBrowserslist: ["> 1%", "最新 3 バージョン", "ie 8"] }) ] }
config.js は、 モジュール.エクスポート = { モジュール: { ルール: { テスト: /\.scss$/, 使用: [ 「スタイルローダー」、 「cssローダー」、 「sassローダー」、 「postcssローダー」 ]、 インクルード: /src/、 }, ] } } バベルローダー目的: Es6+ 構文を Es5 構文に変換します。 cnpm と babel-loader @babel/core @babel/preset-env -D
構成 モジュール.エクスポート = { モジュール: { ルール: { テスト: /\.js$/, 使用: { ローダー: "babel-loader", オプション: プリセット: [ ['@babel/preset-env', { ターゲット: "defaults"}] ] } } }, ] } } tsローダー目的: プロジェクトTypescriptの設定に使用 cnpm i ts-loader typescript -D 構成 モジュール.エクスポート = { モジュール: { ルール: { テスト: /\.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 構成 <!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 は、
モジュール.エクスポート = { モジュール: { ルール: { テスト: /\.(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
構成 「./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 構成 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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ウェブページ経由で jar パッケージを Nexus にアップロードする方法
mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...
この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...
目次序文Axiosのインストールと設定シンプルなGETリクエストを開始するPOSTリクエストを行うシ...
ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...
現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...
序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...
CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...
Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...
MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...
FileZilla Serverをサーバーにインストールすると、425データ接続を開けない問題が発生...
HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...
以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...
1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...
序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...
ゼロ、背景今週の木曜日にたくさんのアラートを受け取りました。DBA に確認を依頼したところ、遅いクエ...