Loaders और rules

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

Webpack नatively केवल JavaScript समझता है। Loaders अन्य file types को valid modules में transform करते हैं। वे file patterns के साथ काम करते हैं और transformations apply करते हैं। Common loaders में babel-loader JavaScript transpilation के लिए, style-loader CSS के लिए शामिल हैं।

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