webpack 打包CSS

简介

由于建立了很多CSS样式文件，比如：reset.css、layout.css、posts.css等等。如果在HTML的head标签中一个个引入，就会导致访问网页时会向服务器发出很多请求，一方面增大了服务器负担，另一方面也会影响用户体验。

所以我需要对网站的多个CSS文件进行打包，把多个文件合为一个并且对CSS代码进行压缩，减小体积，这里我开始尝试使用了webpack这个热门的打包工具进行打包。

安装

webpack

npm i webpack webpack-cli -D

加上--save-dev（简写-D） 参数，将webpack相关依赖保存到package.json文件的devDependencies开发依赖中，表示我们只在开发环境中使用该依赖（对于生产环境我们之只需要它打包后的东西，但它在生产环境不是必须的）。

loader、plugins

只安装了webpack是不足够的，我们需要安装一些CSS相关的插件和加载器。

npm i css-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin -D

css-loader解析CSS文件的一些语法，比如@import等。

mini-css-extract-plugin用来将CSS文件的内容抽离成一个CSS文件。

optimize-css-assets-webpack-plugin用来优化CSS文件，我们这里用它来压缩CSS代码。

配置

webpack.config.js

在项目根目录，也就是和package.json同级的地方创建webpack的配置文件：webpack.config.js。

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  mode: 'production',
  entry: './minify-css.js',  // 入口文件
  output: {
    filename: 'needless.js',  // 输出文件名
    path: path.resolve(__dirname, 'dist')  // 输出文件路径
  },
  plugins: [
    // 使用 mini-css-extract-plugin 插件
    new MiniCssExtractPlugin({
      filename: 'bundle.css'  // 打包后CSS文件名
    })
  ],
  module: {
    rules: [
      // 添加 CSS 打包规则
      {
        test: /\.css$/,
        // 从后往前加载，先使用 css-loader 处理CSS
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  optimization: {
    // 使用 optimize-css-assets-webpack-plugin 优化
    minimizer: [
      new OptimizeCSSAssetsPlugin()
    ]
  }
}

这个配置文件没有加JavaScript的优化压缩，如果需要请加：

安装npm i terser-webpack-plugin -D后，添加

const TerserJSPlugin = require('terser-webpack-plugin')

然后在optimization的minimizer中加new TerserJSPlugin()就可以了。

minify-css.js

require('./stylesheets/reset.css')
require('./stylesheets/layout.css')
require('./stylesheets/posts.css')

我在根目录有stylesheets文件夹，并存放了三个CSS文件，在这个webpack.config.js配置的入口文件中像上面这样引入这些CSS文件。

运行

npx webpack

然后会在dist文件夹中生成一个bundle.css和bundle.js，这些都是上面webpack.config.js中配置的，你可以修改。

然后就有了打包好了我们需要的bundle.css，Emmm，这个bundle.js我们不需要。

补充

我们有一些需要分开打包，不是把所有的都全部打包在一个文件里，需要分开组合。

那么我们只需要修改webpack.config.js的入口entry值为多个：

module.exports = {
  // 省略了其他的配置
  entry: {
    layout: './minify-css-group1.js',
    other: './minify-css-group2.js'
  },
  output: {
    filename: '[name].needless.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css'
    })
  ]
}

这时产生的打包CSS文件就是layout.bundle.css和other.bundle.css，也就是[name]取了entry对象中的对应键。

版权声明：

Anand's Blog文章皆为站长Anand Zhang原创内容，转载请注明出处。

包括商业转载在内，注明下方要求的文章出处信息即可，无需联系站长授权。

请尊重他人劳动成果，用爱发电十分不易，谢谢！

请注明出处：

本文出自：Anand's Blog

本文永久链接：https://anandzhang.com/posts/frontend/9