Plugins और extensions

Plugins बनाम loaders

Loaders specific file types को transform करते हैं। Plugins Webpack build lifecycle में hook करके broader tasks perform करते हैं। Plugins HTML files generate कर सकते हैं, CSS extract कर सकते हैं, code minify कर सकते हैं।

Common plugins

Production builds के लिए HtmlWebpackPlugin और MiniCssExtractPlugin use करें।

const HtmlPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new HtmlPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
  ]
};

Output:

Generates index.html and extracts CSS to separate bundle

Plugin instantiation महत्वपूर्ण है

Plugins को 'new' के साथ instantiate करना जरूरी है। Plugins array को plugin instances मिलते हैं, classes नहीं।

त्वरित जाँच

त्वरित जाँच: Loaders और plugins के बीच मुख्य अंतर क्या है?

• Plugins files को process करते हैं; loaders lifecycle को extend करते हैं।
• Loaders specific files को transform करते हैं; plugins build lifecycle में hook करते हैं।
• वे अलग तरीके से एक ही चीज करते हैं।
• Plugins केवल build खत्म होने के बाद चलते हैं।