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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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横向重复区域显示二法
2008/09/25 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP反射基础知识回顾
2020/09/10 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python调用java的Webservice示例
2014/03/10 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
高级人员简历的自我评价分享
2013/11/03 职场文书
社团活动策划书范文
2014/01/09 职场文书
人事专员的岗位职责
2014/03/01 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
全陪导游词
2015/02/04 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
汽车车尾标语大全
2015/08/11 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS