webpack的CSS加载器的使用


Posted in Javascript onSeptember 11, 2018

什么是loader

loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。

loader的解析

loader的解析类似模块,一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

webpack中常用的加载器

css-loader 处理css中路径引用等问题

用于在js中加载css,解释@import和url()

options

alias: 解析别名

importLoaders(@import): 在css-loader前应用的loader的数目,默认为0

Minimize: true or false 是否开启css代码压缩,比如压缩空格不换行

modules: 是否开启css-module

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.css$/,
   use: ['style-loader', {
    loader: 'css-loader',
    options: {//当css文件中又引用了其他的css的时候,需要设置importLoaders
     importLoaders: 1
    }
   }]
  }]
 }
};

style-loader 动态把样式写入css

加载的css作为style标签内容插入到html中,以<style></style>形式在html页面中插入css代码

options

insertAt: 插入位置

insertInto: 插入到指定的dom

singleton: true or false,多个样式是否只生成一个<style></style>标签

postcss-loader

postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。

用法:

安装postcss: npm install postcss-loader autoprefixer

配置文件

webpack.config.js:

module: {
 rules: [{
  test: /\.css$/
  loader: 'style-loader!css-loader!postcss-loader'
 }]
}

postcss.config.js

module.exports = {
 plugins: [
  require('autoprefixer')//在postcss-loader中引入autoprefixer插件
 ]
}

或者

const autoprefixer = require('autoprefixer');
module: {
 rules: [{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', {
   loader: 'postcss-loader',
   options: {
    plugins() {
     return [autoprefixer];
    }
   }
  }]
 }]
}

less-style

添加对webpack的LESS支持。当遇到less文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包

module: {
 rules: [{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
 }]
}

要启用CSS的source map,你需要将sourceMap选项传递给less-loader和css-loader

CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调bug定位会非常困难,于是引入sourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.less$/,
   use: ['style-loader', 'css-loader', {
    loader: 'less-loader',
    options: {
     sourceMap: true
    }
   }]
  }]
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 #Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 #Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 #Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 #Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 #Javascript
详解Eslint 配置及规则说明
Sep 10 #Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 #Javascript
You might like
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
FCK调用方法..
2006/12/21 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python中的with...as用法介绍
2015/05/28 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python字符串对象实现原理详解
2019/07/01 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
小学运动会开幕词
2015/01/28 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript