从零配置webpack 4+react脚手架（三）： CSS预处理、代码压缩和PostCSS的使用

前端

2023-10-27 22:09:54

从零配置webpack 4+react脚手架（三）： CSS预处理、代码压缩和PostCSS的使用

概述

在上一节中，我们已经完成了一个基本的webpack脚手架的搭建，并对其进行了扩展，使其支持对ES6和JSX的支持。在这一节中，我们将进一步对脚手架进行扩展，使其支持CSS预处理、代码压缩和PostCSS的使用。

CSS预处理

webpack只能编译js文件，css文件是无法被识别并编译的，我们需要loader加载器来进行预处理。

当webpack遇到后缀为.css的文件时，它会先用css-loader加载器去解析这个CSS文件，然后再使用style-loader将解析后的CSS文件的内容插入到页面的<style>标签中。

注意： 如果我们要对CSS文件进行预处理，就需要在css-loader前面加上相应的预处理器的loader。比如，如果我们要对SASS文件进行预处理，就需要在css-loader前面加上sass-loader。

SASS

SASS(Syntactically Awesome Style Sheets)是一种功能强大的CSS预处理语言，它扩展了CSS语言，添加了变量、函数、mixin和继承等特性，使得CSS代码更加易读和易于维护。

安装SASS

npm install --save-dev sass-loader node-sass

配置webpack

在webpack.config.js文件中，找到module.rules数组，并添加以下配置：

{
  test: /\.s(a|c)ss$/,
  use: [
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
      options: {
        implementation: require('node-sass')
      }
    }
  ]
}

LESS

LESS(Leaner CSS)也是一种功能强大的CSS预处理语言，它扩展了CSS语言，添加了变量、函数、mixin和继承等特性，使得CSS代码更加易读和易于维护。

安装LESS

npm install --save-dev less-loader less

配置webpack

在webpack.config.js文件中，找到module.rules数组，并添加以下配置：

{
  test: /\.less$/,
  use: [
    {
      loader: 'css-loader',
    },
    {
      loader: 'less-loader',
      options: {
        implementation: require('less')
      }
    }
  ]
}

代码压缩

代码压缩可以减少代码的大小，从而提高页面的加载速度。webpack提供了很多代码压缩插件，我们可以根据需要进行选择。

UglifyJS

UglifyJS是一个非常流行的代码压缩工具，它可以压缩JavaScript代码，减少代码的大小。

安装UglifyJS

npm install --save-dev uglifyjs-webpack-plugin

配置webpack

在webpack.config.js文件中，找到plugins数组，并添加以下配置：

new UglifyJsPlugin({
  test: /\.js$/,
  exclude: /node_modules/,
  cache: true,
  parallel: true,
  sourceMap: true
})

PostCSS

PostCSS是一个CSS后处理器，它可以对CSS代码进行各种各样的处理，比如自动补全前缀、添加厂商前缀、压缩CSS代码等。

安装PostCSS

npm install --save-dev postcss-loader postcss

配置webpack

在webpack.config.js文件中，找到module.rules数组，并添加以下配置：

{
  test: /\.css$/,
  use: [
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            require('autoprefixer')
          ]
        }
      }
    }
  ]
}