Webpack添加CSS的三種方式

Webpack是一個(gè)強(qiáng)大的模塊打包工具，它可以將各種資源模塊進(jìn)行打包，包括CSS文件，在Webpack中，可以通過以下幾種方式添加CSS：

1、導(dǎo)入CSS文件

在JavaScript文件中導(dǎo)入CSS文件，可以使用import語句導(dǎo)入CSS模塊。

import './style.css';

2、使用style-loader

style-loader是Webpack的一個(gè)插件，它可以將CSS文件的內(nèi)容注入到HTML的style標(biāo)簽中，在Webpack的配置文件中，需要添加對(duì)style-loader的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

3、使用mini-css-extract-plugin插件

mini-css-extract-plugin插件可以將CSS文件提取到一個(gè)單獨(dú)的文件中，在Webpack的配置文件中，需要添加對(duì)mini-css-extract-plugin的配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [new MiniCssextractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssextractPlugin.loader, 'css-loader']
      }
    ]
  }
};

三種方式都可以實(shí)現(xiàn)Webpack添加CSS的功能，選擇哪種方式取決于具體的需求和場景。