Custom loaders और plugins

Webpack को extend करना

Custom loaders functions हैं जो content को transform करते हैं। वे source code receive करते हैं और transformed output return करते हैं। Custom plugins ऐसी classes हैं जिनमें apply() method होता है और जो Webpack compiler में hook करती हैं। दोनों आपको build pipeline में custom processing जोड़ने देते हैं।

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 path।
• Compiled JavaScript output।
• File की source code content।
• Browser का DOM tree।