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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
轻松搞定js表单验证
Oct 13 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
简单三步,搞掂内存泄漏
2007/03/10 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Vue.use源码分析
2017/04/22 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
星球大战与Python之间的那些事
2016/01/07 Python
python爬虫的工作原理
2017/03/05 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python 实现return返回多个值
2019/11/19 Python
python实现堆排序的实例讲解
2020/02/21 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
公务员培训心得体会
2013/12/28 职场文书
寒假思想汇报
2014/01/10 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
清明节寄语2015
2015/03/23 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
python实现简单的三子棋游戏
2022/04/28 Python