Webpack5中CSS处理(单独文件、兼容及压缩)

一、CSS处理

1.1 单独文件

css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的css文件，通过link标签加载性能才好

1.1.1 安装依赖

npm i mini-css-extract-plugin -D

1.1.2 配置

修改config/webpack.prod.js配置

• 引用mini-css-extract-plugin插件
• style-loader替换为MiniCssExtractPlugin.loader
• plugins增加MiniCssExtractPlugin并制定输出目录

const path = require('path') // nodejs核心模块，用来处理路径问题
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    // 文件输出路径
    // __dirname nodejs变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, '../dist'),
    // 入口文件打包输出文件名
    filename: 'static/js/main.js',
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        // 匹配css结尾文件
        test: /\.css$/,
        // loader执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
          // 小于10kb的图片转base64
          // 优点：减少请求数量  缺点：体积会增大三分之一
          dataUrlCondition: {
            maxSize: 20 * 1024 // 20kb
          }
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        }
      },
      {
        /**
         * 处理图标字体、媒体等资源
         * type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
           type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
         */
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ]
  },
  // 插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, '../src')
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, '../public/index.html'),
      inject: 'head'
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),

  ],
  //开发服务器
  // devServer: {
  //   host: '127.0.0.1', // 域名
  //   port: '3000', // 端口
  //   open: true // 是否自动打开浏览器
  // },
  // 模式
  mode: 'production'
}

1.1.3 测试

运行npm run build，查看dist目录

1.2 兼容处理

1.2.1 安装依赖

npm i postcss-loader postcss postcss-preset-env -D

1.2.2 配置

在webpack.prod.js中配置postcss-loader，如下：

{
  // 用来匹配 .css 结尾的文件
  test: /\.css$/,
  // use 数组里面 Loader 执行顺序是从右到左
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
  ],
},

不管是css还是sass等都需要添加postcss-loader，因此对其封装，封装后配置如下：

const path = require('path') // nodejs核心模块，用来处理路径问题
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};


module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    // 文件输出路径
    // __dirname nodejs变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, '../dist'),
    // 入口文件打包输出文件名
    filename: 'static/js/main.js',
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        // 匹配css结尾文件
        test: /\.css$/,
        // loader执行顺序是从右到左
        use: getStyleLoaders()
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
          // 小于10kb的图片转base64
          // 优点：减少请求数量  缺点：体积会增大三分之一
          dataUrlCondition: {
            maxSize: 20 * 1024 // 20kb
          }
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        }
      },
      {
        /**
         * 处理图标字体、媒体等资源
         * type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
           type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
         */
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ]
  },
  // 插件
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, '../src')
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, '../public/index.html'),
      inject: 'head'
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),

  ],
  //开发服务器
  // devServer: {
  //   host: '127.0.0.1', // 域名
  //   port: '3000', // 端口
  //   open: true // 是否自动打开浏览器
  // },
  // 模式
  mode: 'production'
}

1.2.3 控制兼容性

在package.json中添加browserslist控制样式的兼容性到什么程度

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文档

以上为了测试兼容性所以设置兼容浏览器 ie8以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

"browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]

1.2.4 测试

执行npm run build即可

1.3 压缩

1.3.1 安装依赖

npm i css-minimizer-webpack-plugin -D

1.3.2 配置

修改config/webpack.config.js文件

• 引入css-minimizer-webpack-plugin
• 在plugins进行配置

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
...
// 插件
plugins: [
  new ESLintWebpackPlugin({
    // 指定检查文件的根目录
    context: path.resolve(__dirname, '../src')
  }),
  new HtmlWebpackPlugin({
    // 以 public/index.html 为模板创建文件
    // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
    template: path.resolve(__dirname, '../public/index.html'),
    inject: 'head'
  }),
  // 提取css成单独文件
  new MiniCssExtractPlugin({
    // 定义输出文件名和目录
    filename: "static/css/main.css",
  }),
  // css压缩
  new CssMinimizerPlugin(),
],

1.3.3 测试

执行npm run build即可

二、HTML处理

2.1 压缩

默认生产模式已经开启了：html压缩和js压缩

不需要额外进行配置