从0构建webpack开发环境(二) 添加css,img的模块化支持

1. 简介

在前一篇文章中，我们已经使用了webpack打包工具搭建了一个最基本的开发环境。本文将继续完善这个开发环境，添加对css和img资源的模块化支持。

2. 安装依赖

2.1 css-loader和style-loader

在使用webpack处理css文件之前，需要安装两个loader：css-loader和style-loader。打开终端，运行以下命令：

npm install --save-dev css-loader style-loader

其中，css-loader用于处理css文件中的@import和url()等引用外部资源的语句，将其作为一个模块依赖进行处理；style-loader将css-loader处理过的模块插入到HTML的head标签中，使其生效。

2.2 file-loader和url-loader

在处理img等资源的时候，我们需要安装两个loader：file-loader和url-loader。file-loader会将图片等资源打包到输出目录中，并修改引用路径，url-loader将图片等资源转成base64格式，以减少HTTP请求次数。运行以下命令：

npm install --save-dev file-loader url-loader

3. 配置webpack

我们需要对webpack的配置文件进行相应的修改，以支持对css和img等资源的处理。

打开webpack.config.js文件，添加如下代码：

module.exports = {

  // 省略其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 图片小于8KB时，直接转成base64格式
              name: 'images/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

上述代码添加了两个规则：一个是处理css文件的规则，一个是处理img资源的规则。其中，test属性指定规则匹配的资源类型，use属性指定使用的loader。对于url-loader，我们还指定了limit和name属性。当图片体积小于8KB时，会直接转成base64格式，这样可以减少HTTP请求次数；name属性指定了输出文件名或路径。

4. 测试

在代码中引用要进行处理的css文件和img资源，例如：例如创建一个index.css文件和一张avatar.png图片，在入口文件index.js中引用：

import './index.css';

import avatar from './avatar.png';
const img = new Image();
img.src = avatar;
document.body.appendChild(img);

然后，在终端运行打包命令：

npm run build

查看打包后的输出目录，会发现打包后的文件中包含了处理好的css和img资源。

5. 结论

通过安装和配置相应的loader，我们已经成功地为开发环境添加了对css和img等资源的模块化支持，使代码更加规范和易于维护。