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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
Js sort排序使用方法
Oct 17 Javascript
asm.js使用示例代码
Nov 28 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript中this的四种用法
May 11 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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 json相关函数用法示例
2017/03/28 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
使用js画图之饼图
2015/01/12 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python使用多进程的实例详解
2018/09/19 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
执行Python程序时模块报错问题
2020/03/26 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python代码需要缩进吗
2020/07/01 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
取保候审保证书
2014/04/30 职场文书
课外活动总结范文
2014/07/09 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2015年读书月活动总结
2015/03/26 职场文书
团日活动总结格式
2015/05/11 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书