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

admin 2022年4月22日00:20:24评论41 views字数 1822阅读6分4秒阅读模式

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: {
              modulestrue  //让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/',
            limit2048,
          },
        },
      },
      {
        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


原文始发于微信公众号(迪哥讲事):Webpack系列-CSS模块化和字体图标打包

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月22日00:20:24
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   Webpack系列-CSS模块化和字体图标打包http://cn-sec.com/archives/932642.html

发表评论

匿名网友 填写信息