4. 重学webpack——webpack5.0之对样式的处理、图片文件的处理

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

1. 对.css的处理

• 首先，需要用postcss-loader对样式添加浏览器前缀
• 然后，需要用css-loader处理样式文件中的import和url
• 最后，需要用style-loader将css转成js脚本，js脚本作用就是向html中插入一个style标签，标签的内容就是css的样式内容

用法

module: {
    rules: [
        {
            test: /.css$/,
            exclude: /node_modules/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        //modules: true,
                    }
                },
                'postcss-loader'
            ]
        }
    ]
}

知识点

• postcss-loader

  • 对样式添加浏览器前缀

  • css预处理器, 这个生效，需要安装postcss-loader和postcss-preset-env(均为-D)，然后写一个配置文件，用于表明支持的浏览器

  • 配置文件

    // postcss.config.js
    let postCSSPresetEnv = require('postcss-preset-env');
    module.exports = {
      plugins: [
        postCSSPresetEnv({
          browsers: 'last 10 version'
        })
      ]
    }
    

• css-loader

  • 处理样式文件中的import和url
  • options中常用属性：
    • importLoader
      • 作用：在处理引用的模块之前需要经过几个loader处理
      • 举例：
        • 有两个css文件，比如：a.css里面import了b.css，那么:
          • 如果importLoaders值为0，就不经过postcss-loader处理，直接将b.css中的代码拷贝到a.css引入b.css的位置，替换掉import这条
          • 如果importLoaders值为1，当前loader之前有1个loader需要处理，也就是需要经过postcss-loader处理，也就是要将b.css处理成兼容各类浏览器的代码后拷贝到a.css引入b.css的位置，替换掉import这条
    • modules(用得不多)
      • 作用：
        • 这是cssModule，这样做，就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名默认都只作用于当前模块，会把样式的类名变成类似模块命名空间的方式，比如[path][name]__[local]--[hash:base64:5]
        • 可以在js中import style from './styles/b.css'，然后console.log("style", style)，style是一个对象，可以获取模块化后的css类名，当然id也可以模块化
        • 值也可以是对象，暂不介绍，用得不多

2.对less处理（sass同理）

以下为loader配置，下面的importLoaders需要注意，值为几都无所谓，因为importLoaders主要是处理css中的import的，而less-loader中已经把import处理掉了。

{
        test: /\.less$/,
        exclude: /node_modules/,
        use: ['style-loader', {
          loader: 'css-loader', // css-loader能处理import和url，但是这里有了less-loader，那么import早就被less-loader处理掉了，所以这边css-loader主要就是处理url
          options: {
            importLoaders: 2, // 这里写几都无所谓，因为importLoaders主要是处理css中的import的，而less-loader中已经把import处理掉了。
          }
        }, 'postcss-loader', 'less-loader']
      },

3.对图片文件等处理

需要使用url-loader/file-loader

{
    test: /\.(png|svg|jpg|gif|bmp)$/,
        exclude: /node_modules/,
            use: [
                {
                    loader: 'url-loader', // file-loader解决css等文件中引入图片的问题；url-loader当图片小于limit的时候回把图片转成base64编码，大于limit的时候，会使用file-loader进行拷贝
                    options: {
                        name: "[hash:5].[ext]",
                        /*
                面试题：hash是怎么生成的？
                let crypto = require('crypto');
                let content = fs.readFileSync('a.jpg'); // 读取文件
                let hash = crypto.createHash('md5').update(content).digest('hex').slice(0, 10); // 生成10位hash

              */
                        limit: 8 * 1024
                    }
                }
            ]
      }

知识点和面试点

• limit的单位是b

• file-loader与url-loader的区别：

  • file-loader解决css等文件中引入图片的问题；url-loader当图片小于limit的时候回把图片转成base64编码，大于limit的时候，会使用file-loader进行拷贝

特别说明：file-loader、url-loader、html-loader在webpack5.x中已经不用了！！！

• hash是如何生成的？

  下面举例一种常用的hash生成方式，需要引用node内置模块crypto

  let crypto = require('crypto');
                  let content = fs.readFileSync('a.jpg'); // 读取文件
                  let hash = crypto.createHash('md5').update(content).digest('hex').slice(0, 10); // 生成10位hash
  

这只是初步配置，后续还会有css-loader、style-loader的源码分析和样式优化等