Webpack系列-CSS模块化和字体图标打包

CSS模块化

createAvatar部分代码

import avatar from "./avatar.jpg";

function createAvatar() {
  var img = new Image();
  img.src = avatar;
  img.className += 'avatar';

  var app = document.getElementById('app');
  app.appendChild(img);
}

export default createAvatar;

index.js代码

import avatar from './avatar.jpg';
//全局引入,就是说index.css会同时影响createAvatar()和代码a部分
//但是实际的需求是只影响部分(这里为代码a部分),另一部分不受影响
import './index.css';
import createAvatar from "./createAvatar";

//创建img
createAvatar();


//创建img,设为代码a
var img = new Image();
img.src = avatar;
img.className += 'avatar';

var app = document.getElementById('app');
app.appendChild(img);

怎么实现上面的需求?

{
        test: /.scss$/,
        use : [
          'style-loader',//将css-loader生成的css代码放入html的head标签里面
          'css-loader'  //帮助分析css文件之间的引用关系并生成css代码
        ]
      }

变为:

  {
        test: /.scss$/,
        use : [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true  //让css-loader启用CSS Modules(css模块化)功能
            }
          },
        ]
      }

源代码见: https://github.com/richard1230/CodeLearning/tree/main/Javascript/Webpack/css_modules

打包字体图标

module: {
    rules: [
      {
        test: /.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 占位符 placeholder
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048,
          },
        },
      },
      {
        test: /.scss$/,
        use: [
          'style-loader', 
          'css-loader', 
          'postcss-loader', 
          'sass-loader'
        ],
      },
      {
        test: /.(eot|svg|ttf|woff)/,//一般下载好一个iconfont字体图标之后,会包含这几种格式的文件
        use: 'file-loader' //使用file-loader来打包这几种格式的图片
      }
    ],
  }

源代码见: https://github.com/richard1230/CodeLearning/tree/main/Javascript/Webpack/fonts