Custom loaders और plugins

Webpack को extend करना

Custom loaders functions हैं जो content को transform करते हैं। वे source code को receive करते हैं और transformed output return करते हैं। Custom plugins classes हैं जो Webpack compiler में hook करते हैं।

Custom loader write करें

एक simple loader बनाएँ जो text files को transform करता है।

module.exports = function(content) {
  const result = content.toUpperCase();
  return `export default ${JSON.stringify(result)}`;
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: './loaders/uppercase-loader.js'
      }
    ]
  }
};

Output:

Loader transforms text file content to uppercase

Loaders chainable हैं

Multiple loaders एक ही file को sequentially process करते हैं। प्रत्येक loader output return करता है जो next का input बनता है। Order matters: use array में right-to-left।

त्वरित जाँच

त्वरित जाँच: Loader को input के रूप में क्या मिलता है?

• File की source code content।
• केवल file path।
• Compiled JavaScript output।