自分で簡単なカスタムリーダーを書きます.

Webpack custom loader
文章の引用は出典を明記してください.
この文章では自分のwebpackをどうやって作ったらいいですか?
webpack loaderの役割は、モジュール資源の変換を行い、webpackパッケージはjsのみを認識しています.この時、プロジェクトで使用されたピクチャリソース、スタイルリソースなどは、loaderで変換し、jsに変換して、webpackで梱包します.
そのloaderはどのように変換されていますか?各loaderはjsファイルです.webpackからその「文脈」を受信しました.この「文脈」はプロジェクトソースコードです.loaderはソースコードを取得します.実は一連の文字列です.操作変換ができます.
次にデモを見ます.
例えば、私たちはこのような需要があります.つまり、私たちのすべての包装書類に「社名@年」という注釈文をつけます.
まず、私たちはwebpack.co.nfig.jsの同じクラスのディレクトリでcustom-loadersというディレクトリを作成して、このディレクトリの下にカスタムloaderファイルadd-copyright-loader.jsを作成します.

// `add-copyright-loader.js`
module.exports = function (content) {
  return `/** alibaba@2020 */
${content}`;
};

loaderファイルは一つのnodeモジュールであり、comonJsで一つの関数を導出します.この関数は三つのパラメータがあります.content、map、meta、map、metaは省略できます.ここでcontentはwebpack処理ソースファイルを取得する時、各ファイルに対応するコードです.stringまたはbufferです.この文字列を手に入れたらソースコードを修正して、必要な形に変えて返します.
webpack.co.nfig.jsに私達のカスタムloaderを追加します.

// ... 
module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        use: [
          {
            loader: path.resolve(
              __dirname,
              "./custom-loaders/add-copyright-loader.js"
            ),
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },

その後、npm run buildを実行して、私達は梱包ファイルの中で見ることができます.

// dist/index.js    webpack config mode    'none'      
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _add__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/** alibaba@2020 */

console.log("test");


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/** alibaba@2020 */
const add = (a, b) => a + b;


/***/ })
/******/ ]);

まとめ:webpack loaderとは、リソースファイルの変換です.前のlaoderから結果を得て、変換して次のloaderに戻りますので、プロファイルではloaderの順番に注意してください.