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数组处理多个字符串的连接问题
Aug 20 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
如何使用JavaScript策略模式校验表单
Apr 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 上传文件的方法(类)
2009/07/30 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
几行js代码实现自适应
2017/02/24 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python实现UDP协议下的文件传输
2020/03/20 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
心理健康日活动总结
2014/05/08 职场文书
大学生就业自荐书
2014/06/16 职场文书
个人授权委托书样本
2014/09/13 职场文书
酒店前台辞职书
2015/02/26 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书