使用loader打包静态文件-样式2

这篇我们了解下css-loader常用的配置项,要配置的话,use里面就不再是一个字符串了

// 打包模块不知道该怎么办,就去模块配置里面该怎么办
module: {
  // 规则
  rules: [{
    // 假设是以css结尾的,我需要一个load帮助我们去打包
    test: /\.scss$/,
    // 需要两个loader,所以不能是个对象,需要是个数组
    use: [
      ‘style-loader‘,
      ‘css-loader‘,
      ‘sass-loader‘,
      ‘postcss-loader‘
    ]
  }]
},

改成

// 打包模块不知道该怎么办,就去模块配置里面该怎么办
module: {
  // 规则
  rules: [{
    // 假设是以css结尾的,我需要一个load帮助我们去打包
    test: /\.scss$/,
    // 需要两个loader,所以不能是个对象,需要是个数组
    use: [
      ‘style-loader‘,
      {
        loader: ‘css-loader‘,
        options: {
          importLoaders: 2
        }
      },
      ‘sass-loader‘,
      ‘postcss-loader‘
    ]
  }]
},

在很多脚手架中,我们都可以看到importLoaders这样的配置项,那他是什么意思呢

比如index.scss里面引入了avatar.scss

index.scss

@import ‘./avatar.scss‘;

body{
  .avatar {
    width: 150px;
    height: 150px;
    transform: translate(100px, 100px)
  }
}

在index.js里面引入index.scss,webpack在打包的时候,先去执行postcss-loader,然后执行scss-loader,css-loader,style-loader。但是在index.scss里面遇到avatar.scss的时候,就不再去执行postcss-loader了。而是执行scss-loader了,那如果写上这个配置

importLoaders: 2

那么还会从下到上执行postcss-loader,scss-loader...。所以这个就能保证,我在哪引用都没有问题。

接下来我们了解下css的模块化

createAvatar.js

import avatar from ‘./avatar.jpg‘;

function createAvatar() {
  var img = new Image();
  img.src = avatar;
  img.classList.add(‘avatar‘);

  var root = document.getElementById(‘root‘);
  root.appendChild(img);
}

export default createAvatar;

index.js

import avatar from ‘./avatar.jpg‘;
import ‘./index.scss‘;
import createAvatar from ‘./createAvatar‘;

createAvatar();

var img = new Image();
img.src = avatar;
img.classList.add(‘avatar‘);

var root = document.getElementById(‘root‘);
root.appendChild(img);

这样我们打包出来,会看到两张图片,而且样式都是一样的。这个我们要说明一个什么问题呢。在index.js里面引入的index.css会作用于当前页面的img标签,还会作用于createAvatar里面的img标签,这么写,这个样式是全局的,这样很容易引起样式冲突的问题。这个时候我们就引入了一个概念,css module的概念,css模块化的概念,什么意思呢,就是这个css样式只作用于当前页面。

// 需要两个loader,所以不能是个对象,需要是个数组
use: [
  ‘style-loader‘,
  {
    loader: ‘css-loader‘,
    options: {
      importLoaders: 2,
      modules: true
    }
  },
  ‘sass-loader‘,
  ‘postcss-loader‘
]

加一个modules的配置,在引入css的地方改成这样

index.js

import avatar from ‘./avatar.jpg‘;
import style from ‘./index.scss‘;
import createAvatar from ‘./createAvatar‘;

createAvatar();

var img = new Image();
img.src = avatar;
img.classList.add(style.avatar);

var root = document.getElementById(‘root‘);
root.appendChild(img);

打包运行会发现一个是什么样式都没有,一个是有样式的,这样就能保证只有这个文件有对应的样式。如果想要createAvatar也有样式,那么在createAvatar里面也引入

import avatar from ‘./avatar.jpg‘;
import style from ‘./index.scss‘;

function createAvatar() {
  var img = new Image();
  img.src = avatar;
  img.classList.add(style.avatar);

  var root = document.getElementById(‘root‘);
  root.appendChild(img);
}

export default createAvatar;

这样又有样式了,这样带来的语法好处是,我这个文件的样式和其它文件的样式不会有耦合,冲突,相对独立。

那么如何使用webpack,打包字体文件,src目录下一个font文件夹,放着字体的格式

index.js

var root = document.getElementById(‘root‘);
import ‘./index.scss‘;

root.innerHTML = ‘<div class="iconfont iconfangdajing">abc</div>‘;

index.scss

@font-face {font-family: "iconfont";
  src: url(‘./font/iconfont.eot?t=1555804223122‘); /* IE9 */
  src: url(‘./font/iconfont.eot?t=1555804223122#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASYAAsAAAAACSgAAARLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqFSIRjATYCJAMUCwwABCAFhG0HRRvsB8gehXEbHUKqr74VirOKgNrvtydP5j7iSZJq9+kkQsQThEJo0AKdUkSzl/DPctrYLiZcQvcIkgKDoUCBteuSI8cHnPSAfsDwA8IXICcBAsD+uHf6V+eBzWdZLmMu25uKBmA0gQIaY3IBZekAKeeW4bWL1WEeJ6CYNAJ2UFhOgZcMjwsIlwJvAq+ETq4gB62yLliaIdyBuzbOxi/h1vt8+LeRF4iqBHjq4XGBFbK//F7WEA6XQ7ODAH84C4RVJCwBmXBVaLtEBIElhKL9zs0OULSi+DXyPPB54ssalwtdtCFFIUGiPMyfF2rAsh4g7QQzX34Wk8hXIK9InghMEj81gmuRVc6Sgn58grACWDHuyeKB36IZ1AeovLz8lVrCN1ytVYyhDt+Gx1sURtHY3RfWeYdh4nGO2zXskTtyLow7PnoXu/PMFPS8fZueezcLLZy73Tk+n8Nych7uzh2tglFRii5lQ+OiCMWKoHrTQeVcgBIUx8qcK5iTZZ2KOen0gS3g2KqcexLD2DkBiwLZxZv96YVL/KgFLMU2zVnkDGS3zx260LGgRDJHldZLPn6xMyAzrrcu4Khz/TMWOqRdgGRxhF3SF+Qt3Oi/MWTRtm2bAjYFL9zaoiveTb/Q37Hgz6GGhntGew4+88CBmXj2FPxS9mG3v3/dDjflrf3Tl6h0NZoKaXtqNC1DxCx8/smT8wnCdjj2tvNOnpqPZ9mG3tZolobEhSQ8+k5M2717GhITYMWn4RHHZcMzwDGu6PqQ/OtI4zLn3enMrKLxXLOQedftT6ZdPp1sxNxzDOJQRlC3KMuyU5+2svLFYP8/IQM/DYyAs2qvQj7EOD2lgGdoPnfBDGNUjDOyoT6SKfScrco/ezYqNiZftTQwLwleInePz2j0WKLO//qZ1jGXLB/68CVPZXb58PndiH+XXMP+f0PaB7ldtpidp56ljl9C8Rd3rqlOGOq1aKWbHR/iGfek7mHEQ3amxnMJJAN0j6djKcdDXSiEnqZ9BP4Dfcf9rU9imzb9m5fSDeD10fUsKOg6MqQbgL9ArjH/d+E3LMu6EOurrBZbPDVUOeV5a7laXcFP4hpyfxjHKIgsQSvyAaLGBCStKTSTlqDSsQW11jYUi4pWdwyTEEL2BhZMRxAM2A1RnwdIBlxGM+keVMa8g9pABBRHwXfLjpkERZ6ETDKykuZxpGARezlqlBV+ei3iR3WbpLjQozBIsgtuMsYQnQ4XoV4kDTHDPpqPlWWO5CSxhyxEp6HubpG0SWInssiGDlm2pRqNXNGdDBaxBxT2SRATGWJFMhuHJLAQ9eKc2jJF5v21EN4o3UykipIaKwOR2Amdk2IYRDdAi2S9jUoupbfdaLxYMhnHjuJIRD1IhWBBuklARLIVD+qEWMgMOjr4bFIZmWpcU5lhekXPPW6DAl9RBRwjMDfMHfOAfG0TehWcqZe3mjoFJw/PMeFmAQAA‘) format(‘woff2‘),
  url(‘./font/iconfont.woff?t=1555804223122‘) format(‘woff‘),
  url(‘./font/iconfont.ttf?t=1555804223122‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url(‘./font/iconfont.svg?t=1555804223122#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconspin:before {
  content: "\e851";
}

.iconfangdajing:before {
  content: "\e614";
}

.iconAa:before {
  content: "\e636";
}

.iconbi:before {
  content: "\e617";
}

这样理论上没有什么问题,运行 npm run bundle。发现报错了,报什么错呢

如图,他说字体不知道如何打包,这是为什么呢,在执行引入字体文件的时候,webpack不知道如何打包,这个时候借助于file-loader打包

module: {
  rules: [{
    test: /\.eot|ttf|svg|woff$/,
    use: {
      loader: ‘file-loader‘
    }
  }]
}, 

再重新运行npm run bundle,就没有报错了,页面上对应的字体内容也显示出来了。

原文地址:https://www.cnblogs.com/wzndkj/p/10743793.html

时间: 2024-10-20 22:12:42

使用loader打包静态文件-样式2的相关文章

Go 语言打包静态文件

对于 Go 语言开发者来说,在享受语言便利性的同时,最终编译的单一可执行文件也是我们所热衷的.但是,一旦遇到我们需要分发的东西不只有可执行文件的时候,事情就变得稍微有点复杂了,例如,需要分发个默认的配置文件:或者说是一个 Web 服务需要附带一些简单的 js/css 文件之类的. 当然,对于经验丰富的老司机们来说这都不是问题,例如 RH 系列的 RPM 是很多老司机们的选择,像我这样的新手也是觉得老司机们的这车开得好,可以很方便得管理一个分发包.但是,对于我们说的如果只有一点点文件,我就来打个

maven之打包静态文件

将近太文件进行zip打包,实现动静分离 pom.xml Xml代码   <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-assembly-plugin</artifactId> <version>2.2</version> <executions> <execution> <id>make-as

VUE打包好的文件部署让beego实现静态文件访问,如何用根目录来访问静态文件?

最近的一个全栈项目,光伏云监控系统,后端使用beego框架,纯api,前端使用VUE2.0.项目地址:http://scada.ssechina.com:88/static 我把打包好的前端文件放到go的static目录, 然后main里面设置 beego.BConfig.WebConfig.StaticDir["/static"] = "static"只能用ip/static/login.html来访问 如果改成beego.BConfig.WebConfig.St

打包静态库.a文件及bundle资源包的创建及使用

之前打包静态库好多步骤记不太清楚了,发现网上给的资料各种各样,好多坑不清楚,而且不太全面,所以自己整理了下资料,供大家参考,细节不足之处还望指正. 设置 Build Setting 中的 COMBINE_HIDPI_IMAGES 为 NO,否则 Bundle 中的图片就是 tiff 格式了. lipo -create /Users/apple/Desktop/~.a /Users/apple/Desktop~.a -output /Users/apple/Desktop/~.a 编译生成 Bun

create-react-app 打包后静态文件过大 webpack优化

在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大. 1.关掉sourcemap 在config/webpack.config.js文件里,大概30几行的位置添加这样一句代码,这样做的作用是防止线上生成环境将源码一起打包部署. 2.将一些公共的库(比如antd)做一个缓存 splitChunks: { chunks: 'all', name: "vender", cacheGroups: { vender: { name: "vendor&quo

Web 前端性能优化 : 如何有效提升静态文件的加载速度

作者:刘轶斌,腾讯应用开发 工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处.原文链接:http://wetest.qq.com/lab/view/345.html 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也

Web前端性能优化——如何有效提升静态文件的加载速度

一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也就是所谓的“直出”.将首屏所有内容在服务器端渲染成html静态代码后,直接输出给浏览器,可以有效加快用户访问站点时首屏的加载时间.不过此方面也不在本文讨论范围内. 3.提升静态文件的加

Spring MVC学习笔记——引入静态文件

1.在user-servlet.xml中加入以下代码,才能使得对静态文件的请求不被Controller捕获,而映射到一个固定的地址 <!-- 将静态文件指定到某个特殊的文件夹中统一处理 --> <mvc:resources location="/resources/" mapping="/resources/**"></mvc:resources> 2.在WebContent文件下面,添加resources文件夹和css/main

Web的形式发布静态文件

Web的形式发布静态文件 虽然ASP.NET Core是一款"动态"的Web服务端框架,但是在很多情况下都需要处理针对静态文件的请求,最为常见的就是这对JavaScript脚本文件.CSS样式文件和图片文件的请求.针对不同格式的静态文件请求的处理,ASP.NET Core为我们提供了三个中间件,它们将是本系列文章论述的重点.不过在针对对它们展开介绍之前,我们照理通过一些简单的实例来体验一下如何在一个ASP.NET Core应用中发布静态文件.[本文已经同步到<ASP.NET Co