序文本来の意図: 一般的に使用されるローダーを整理して全員と共有し、どのシナリオでどのローダーを使用するかがわかるようにすること。もし静かに左にスワイプする方法を知っている大物が世の中にいたら、それが気に入らなくても私を批判しないでください。 スタイルローダー目的: コンパイルされた 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 にアップロードする方法
序文開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応...
前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...
注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...
目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
Docker-compose デプロイメント構成 Jenkins 1. Docker-compose...
オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...
VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...
目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...
Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...
この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...
まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...
目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....