从零到一，详解webpack中的CSS打包

前端

2023-12-15 00:13:59

为什么需要将CSS单独打包？

在webpack中，默认情况下，CSS样式会被内联到JavaScript文件中。这在项目规模较小的时候可能没什么问题，但随着项目规模的增大，JavaScript文件的大小会不断增加，导致加载速度变慢。

此外，将CSS单独打包还有以下好处：

提高缓存利用率。当CSS文件单独打包后，浏览器可以对CSS文件进行缓存。这样，当用户再次访问页面时，浏览器就可以直接从缓存中加载CSS文件，无需再次下载。
提高代码可读性和可维护性。当CSS文件单独打包后，代码结构会更加清晰，便于开发人员阅读和维护代码。
方便代码复用。当CSS文件单独打包后，可以将其复用在多个项目中，无需重复编写CSS代码。

如何将CSS单独打包？

在webpack中，有多种方法可以将CSS单独打包。下面介绍两种最常用的方法：

使用style-loader和css-loader

style-loader和css-loader是两个非常流行的webpack插件，可以帮助我们轻松地将CSS文件单独打包。

首先，我们需要在webpack配置文件中安装这两个插件：

npm install --save-dev style-loader css-loader

然后，在webpack配置文件中配置这两个插件：

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

这样，webpack就会将所有以.css为扩展名的文件都交给style-loader和css-loader处理。style-loader负责将CSS代码注入到HTML文件中，而css-loader负责解析CSS代码并将其转换为JavaScript代码。

使用mini-css-extract-plugin

mini-css-extract-plugin是一个非常强大的webpack插件，可以帮助我们轻松地将CSS文件提取到单独的文件中。

首先，我们需要在webpack配置文件中安装这个插件：

npm install --save-dev mini-css-extract-plugin

然后，在webpack配置文件中配置这个插件：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }
  ]
}

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css'
  })
]

这样，webpack就会将所有以.css为扩展名的文件都交给MiniCssExtractPlugin.loader和css-loader处理。MiniCssExtractPlugin.loader负责将CSS代码提取到单独的文件中，而css-loader负责解析CSS代码并将其转换为JavaScript代码。