Webpack リテラシー - ローダーの書き方

序文

1.ローダーについて

2. ニーズの確認

序文

この記事は、読者がフロントエンドエンジニアリングをある程度理解し、webpack についてもある程度理解し、webpack の使用方法を知っていることを前提としています。この記事では、読者が webpack ローダーを手動で作成できるように段階的に導き、webpack についての理解を深めます。

1.ローダーについて

ローダーは Webpack の非常に重要なコンポーネントです。既存のコードをターゲットコードに変換するために使用されます。最もよく知られているのは、es6 コードをほとんどのブラウザで実行できるものに変換できる babel です。次に、es5 コードを試します。手動でローダーを作成して、ローダーが何であるかを確認します。

2. ニーズの確認

まずはシンプルなローダーで何ができるかを確認しましょう日常生活ではこのようなニーズがあるはずです開発環境と本番環境では同じインターフェースの API アドレスが異なります実行フェーズではプロセスを通じて異なるものを区別できます.env. 環境はさまざまなリンクを使用しているため、コンパイル段階でこれを行う方法はありますか? 私たちのローダーはこの機能を実現できます。

3.ローダー書き込み

1.初期化

まず、新しいフォルダー「loader-example」を作成します。ディレクトリ構造は次のとおりです。

src/index.js

const content = {
   
   { __path__ }};
console.log(content);
document.getElementsByTagName('body')[0].innerHTML = content

パッケージ.json

{
  "name": "loader-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^4.5.0",
    "loader-utils": "^2.0.0",
    "open": "^7.3.0",
    "path": "^0.12.7",
    "webpack": "^5.7.0"
  },
  "devDependencies": {
    "webpack-cli": "^4.2.0"
  }
}

webpack.config.js

module.exports = {
    mode: 'development', // 先设置为development，不压缩代码，方便调试
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
}

私たちの目標は、コンパイル段階で { をindex.js に入れるローダーを作成することです。 { __path__ }} を実際に必要なパスに移動します。したがって、npm install を実行してすべての依存関係をインストールしてから、npm run build. 予想通り、エラーが報告され、それに対処する方法はありません { { __path__ }} というメッセージが表示され、ローダーが必要になる可能性があることが示されています。次に、ローダーの作成を開始します。

2.ローダー書き込み

実際、ローダーは、率直に言って、関数です。必要なのは、関数を定義し、それを webpack.config.js に正しく導入することだけです。ディレクトリローダーとファイル replaceLoader.js をルートに追加します。ファイルパスは、loaders/replaceLoader.js です。最も単純なものから始めましょう。

module.exports = function (source) {
    const result = source.replace("{
   
   { __path__ }}", "测试");
    //this.callback 也是官方提供的API，替代return
    this.callback(null, result);
}

関数をエクスポートします。この関数の入力パラメータは元の js のテキストです。それに対して任意の操作を実行できます。ここで、それを test という単語に置き換えます。最後に、対応する値を返すために this.callback を呼び出すことを忘れないでください。このようにしてのみ, パッケージ化されたコンテンツは新しいコンテンツになります. コールバックはエラー第一原則に従います. 最初のパラメータはエラー値, 2 番目のパラメータは変換された結果です. その後, webpack.config.js を更新します. webpack に追加.config.js の module 属性は次のようになります

module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
            }
        }]
    },

対応するローダーをモジュールに導入し、npm run build を再度実行して、dist フォルダー内の main.js を観察します。テンプレートコードが test という単語に置き換えられていることがわかります。
ただし、より高い目標がある場合、たとえば、このプラグインを構成できるようにしたい場合はどうすればよいでしょうか?

3. 構成可能なコードを追加する

Index.jsを以下のように修正します

const loaderUtils = require('loader-utils');
module.exports = function (source) {
    //拿到options 配置
    const options = loaderUtils.getOptions(this);
    //回头options里面配置个value参数
    const { value } = options;
    //将源文件内容替换成value
    const result = source.replace("{
   
   { __path__ }}", JSON.stringify(value));
    //this.callback 也是官方提供的API，替代return
    this.callback(null, result);
}

webpack.config.js の構成コンテンツを取得できるようにするloader-utils ツールキットを導入し、webpack.config.js のモジュールを更新します。

 module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                options: {
                    value: 'http://www.baidu.com' //参数传入到loader里面，方便getOptions接收到
                }
            }
        }]
    },

ローダーでパラメーターを取得できるように、オプションで対応するパラメーターを設定します。この時点で、非常に単純なローダーが完成しました。

4. コードのデバッグ

非常に単純なローダーの場合は、基本的にあまりデバッグせずにパッケージ化して、結果が正しいかどうかを確認できますが、より複雑なローダーの場合、作成プロセス中にどのようにデバッグすればよいでしょうか?

コマンドを直接使用して webpack のデバッグモードを有効にすることができます。まず、デバッグするコードにデバッガーを配置し、コマンドラインに次のコマンドを入力してパッケージ化します。

node --inspect-brk ./node_modules/webpack/bin/webpack.js

この時点で、監視がオンになっていることがわかります。

次に、chrome://inspect/#devices で次のアドレスを開くと、次のインターフェイスが表示されます。

赤枠内のテキストをクリックするだけでデバッグをお楽しみいただけます。