3. 首页css移植及webpack5图片打包新特性详解

css 移植

在入口文件 index.js 引入 首页依赖的 css 文件

import './css/public.css'
import './css/index.css'

同时，需要安装css-loader 和 style-loader(loader的作用在前面的文章讲过)

npm install css-loader style-loader -D

配置webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 模板的名称
            filename: 'index.html',
            // 模板地址
            template: './src/index.html',
        })
    ]
}

执行npm run build，打包报错，报错的主要原因是css文件中包含图片，接下来利用webpack5新特性来处理图片打包。

webpack5图片打包新特性

以public.css里面图片为例:

background: url(../img/ss.png) no-repeat right 5px;

一般 webpack 会把 ss.png 打包进 bundle.js 里面，如果图片很大的话，会把图片单独抽离出来并重新命名，最后把重新命名的图片重新写到 background 的 url里面，这一系列的操作肯定是需要有工具来支持的，上面之所以会报错，是因为我们没有配置相应的工具。

在传统的图片打包过程中，即在webpack5之前通常是使用file-loader，url-loader ，现在webpack5提供了一种新的图片打包方案：module asset，我们不在需要去安装file-loader，url-loader，使用webpack内置的能力就能实现图片打包。webpack.config.js配置如下:

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          // 表示启动 webpack5 中的 module asset 特性
          type: 'asset',
         // 把图片模块化，其实就是把图片变成base64的字符串，再把字符串注入到bundle当中
          parser: {
            // 超过8kb的图片不会被打包到bundle.js中
            dataUrlCondition: {
              maxSize: 8 * 1024
            }
          },
          // 图片输出的名称
          generator: {
            // 创建一个images目录来保存图片
            // 配置hash主要是为了防止图片重命，比如在不同目录下有两个相同名称的图片，最后打包到一个images目录下必然是重名的
            filename: 'images/[name].[hash:6][ext]'
          }
        }
    ]
}
...

执行npm run build打包，打包成功。因为引入的图片较小，图片被转化为base64（如下图），直接被打包到bundle.js里面了。