वेबपैक में लेआउट में स्टाइल बंडल

आइए अब वेबपैक को बनाएं ताकि यह स्वचालित रूप से CSS बंडल को वेबसाइट के HTML लेआउट से जोड़ दे।

मान लीजिए कि एंट्री पॉइंट में दो CSS फाइलें इम्पोर्ट की गई हैं:

src/index.jsimport './styles1.css';
import './styles2.css';

आइए इन फाइलों को एक सामान्य बंडल में बिल्ड करने के लिए कॉन्फ़िगर करें। सबसे पहले सभी आवश्यक इम्पोर्ट्स करते हैं:

webpack.config.jsimport path from 'path';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';

अब कॉन्फ़िगरेशन करते हैं:

webpack.config.jsexport default {
  context: path.resolve( 'src'),
  entry: './index.js',
  output: {
    filename: 'build.[contenthash].js',
    path: path.resolve('dist'),
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'build.[contenthash].css'
    }),
    new HtmlWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

परिणामस्वरूप, बिल्ड के बाद हमारे पास स्क्रिप्ट वाला बंडल और स्टाइल्स वाला बंडल जुड़ा होगा:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="build.4173b379c6d6ff439604.js"></script>
    <link href="build.97299e5ee87c9c343a4c.css" rel="stylesheet">
  </head>
  <body>
    
  </body>
</html>