webapck中使用loader的方法有三种

  使用loader之前必须运行安装 : npm install --save-dev xxx-loader

  (1)通过CLI : 命令行中运行 webpack --module-bind jade  --module-bind 'css=style!css'

    //jade,style,css后面可省略-loader,他们分别对.jade使用jade-loader,对.css使用style-loader和css-loader

  (2)通过require : require('style-loader!css-loader?module!./style/main.css')

    //对main.css使用css-loader和style-loader加载,loader解析顺序是从右往左

  (3)通过配置webpack.config.js :

  //在webpack.config.js插入modules属性;(1)rules中包含对象数组,每个对象中{test,use}test对应正则表达式,use包含多个所需loader,如只需一个loader可省去use,格式如:loader : 'xxx-loader'

modules : {
rules : [
{
     test : /\.css/,
use : [
{ loader : 'style-loader'},
{
loader : 'css-loader',
options : {
module : true
}
}
]
   },
    {//第二个loader},
    {//第三个loader}
  ]
}

  1.模板:

    (1)html-loader:将HTML文件导出编译为字符串,可供js识别的其中一个模块

    (2)pug-loader : 加载pug模板

    (3)jade-loader : 加载jade模板(是pug的前身,由于商标问题改名为pug)

    (4)ejs-loader : 加载ejs模板

    (5)handlebars-loader : 将Handlebars模板转移为HTML

  2.样式:

    (1)css-loader : 解析css文件中代码

    (2)style-loader : 将css模块作为样式导出到DOM中

    (3)less-loader : 加载和转义less文件

    (4)sass-loader : 加载和转义sass/scss文件

    (5)postcss-loader : 使用postcss加载和转义css/sss文件

  3.脚本转换编译:

    (1)script-loader : 在全局上下文中执行一次javascript文件,不需要解析

    (2)babel-loader : 加载ES6+ 代码后使用Babel转义为ES5后浏览器才能解析

    (3)typescript-loader : 加载Typescript脚本文件

    (4)coffee-loader : 加载Coffeescript脚本文件

  4.JSON加载:

    (1)json-loader : 加载json文件(默认包含)

    (2)json5-loader : 加载和转义JSON5文件

  5.Files文件

    (1)raw-loader : 加载文件原始内容(utf-8格式)

    (2)url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL

    (3)file-loader : 将文件发送到输出的文件夹并返回URL(相对路径)

    (4)jshint-loader : 检查代码格式错误

  6.加载框架:

    (1)vue-loader : 加载和转义vue组件

    (2)angualr2-template--loader : 加载和转义angular组件

    (3)react-hot-loader : 动态刷新和转义react组件中修改的部分,基于webpack-dev-server插件需先安装,然后在webpack.config.js中引用react-hot-loader

webpack配置常用loader加载器的更多相关文章

  1. vue-loader 调用了cssLoaders方法配置了css加载器属性。

    module: { loaders: [ // 这里也是相应的配置,test就是匹配文件,loader是加载器, { test: /\.vue$/, loader: 'vue' }, { test: ...

  2. Loader加载器

    今天学到了这个Loader,浅谈一下自己的看法: 1.定义 Loader是一个加载器,可以用来它访问数据,可以看做访问数据的机器(好比挖掘机).装再器从android3.0开始引进,它使得在activ ...

  3. webpack loader加载器

    配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...

  4. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  5. 恶意软件开发——编写第一个Loader加载器

    一.什么是shellcode loader? 上一篇文章说了,我们说到了什么是shellcode,为了使我们的shellcode加载到内存并执行,我们需要shellcode加载器,也就是我们的shel ...

  6. webpack4.41.0配置二(加载器_url-loader/babel-loader/sass-loader)

    loader是webpack用来预处理源文件的,比如typesrcipt形式的文件最终都得转成浏览器可以执行的js文件 (注:以下的配置代码不一定与下方一摸一样,具体与官网上https://webpa ...

  7. Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  8. AMD加载器实现笔记(三)

    上一篇文章中我们为config添加了baseUrl和packages的支持,那么这篇文章中将会看到对shim与paths的支持. 要添加shim与paths,第一要务当然是了解他们的语义与用法.先来看 ...

  9. 007-spring cloud gateway-GatewayAutoConfiguration核心配置-RouteDefinition初始化加载

    一.RouteDefinitionLocator 在Spring-Cloud-Gateway的GatewayAutoConfiguration初始化加载中会加载RouteDefinitionLocat ...

随机推荐

  1. PHP之错误

    三.PHP配置之Error handling logging 1.error_reporting integer error_reporting = E_ALL 设置错误报告的级别.该参数可以是一个任 ...

  2. android gradle jnilibs

    https://blog.csdn.net/xx326664162/article/details/51167849 [ABIXCPU] Android jniLibs下目录详解(.so文件) htt ...

  3. 转:手把手教你如何玩转Solr(包含项目实战)

    原文地址:手把手教你如何玩转Solr(包含项目实战) 参考原文

  4. LeetCode 905 Sort Array By Parity 解题报告

    题目要求 Given an array A of non-negative integers, return an array consisting of all the even elements ...

  5. word标题自动编号

    1.打开word文档中多级列表->定义新的多级列表 2.根据下图设置级别对应的标题,然后确定

  6. redis使用rdb恢复数据

    redis中存在rdb备份和aof备份两种方式. 如果在redis多个节点发生雪崩时,我们往往使用定期冷备rdb或者aof文件,去恢复数据的方式,但往往数据量较大时rdb恢复更加的快速,毕竟aof保存 ...

  7. 洛谷P2303 [SDOi2012] Longge的问题 数论

    看懂了题解,太妙了TT但是想解释的话可能要很多数学公式打起来太麻烦了TT所以我就先只放代码具体推演的过程我先写在纸上然后拍下来做成图片放上来算辣quq 好的那我先滚去做题了做完这题就把题解放上来.因为 ...

  8. 关于javascript中defineProperty的学习

    语法 Object.defineProperty(obj, prop, descriptor) 参数 obj 要在其上定义属性的对象. prop 要定义或修改的属性的名称. descriptor 将被 ...

  9. int(1)和int(11)是否有区别?

    MySQL类型关键字后面的括号内指定整数值的显示宽度(例如,INT(11)).该可选显示宽度规定用于显示宽度小于指定的列宽度的值时从左侧填满宽度.显示宽度并不限制可以在列内保存的值的范围,也不限制超过 ...

  10. linux 查看磁盘读写:iotop

    iotop命令用来动态地查看磁盘IO情况,用法如下: 安装iotop命令 [root@mysql ~]# yum install iotop -y [root@mysql ~]# iotop Tota ...