Loaders और rules

Loaders क्या करते हैं

Webpack natively केवल JavaScript और JSON समझता है। Loaders अन्य file types को valid modules में transform करते हैं। वे pattern (test) से files match करते हैं और transformations (use) apply करते हैं। Common loaders में JavaScript transpilation के लिए babel-loader और CSS के लिए css-loader व style-loader शामिल हैं। Images और fonts के लिए file-loader की जगह Webpack 5 asset modules का उपयोग करें।

Loaders को configure करें

CSS और JavaScript को transpilation के साथ process करने के लिए module rules add करें।

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/preset-env'] }
        }
      }
    ]
  }
};

Output:

Loaders process files matching test pattern left-to-right

Loader order महत्वपूर्ण है

Loaders 'use' array में right-to-left execute होते हैं। CSS के लिए, css-loader CSS को parse करता है, फिर style-loader इसे DOM में inject करता है।

त्वरित जाँच

त्वरित जाँच: 'use' array में loaders किस direction में execute होते हैं?

• Right से left
• Left से right
• Random order
• Alphabetical order