webpack 打包CSS

简介

由于建立了很多CSS样式文件,比如:reset.csslayout.cssposts.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')

然后在optimizationminimizer中加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.cssbundle.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.cssother.bundle.css,也就是[name]取了entry对象中的对应键。


版权声明:

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

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

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

请注明出处:

本文出自:Anand's Blog

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