webpack3之loader全解析


Posted in Javascript onOctober 26, 2017

首先亮出webpack官方网站,webpack能干什么?官网给出的答案就是,一句话,让一切变得简单!

各式各样的loader层出不穷,让我们在构建时不知所措,于此,总结下loader的全解析。

概念

loader,顾名思义,加载器,英文的解释如下:

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

中文翻译过来就是:

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或“加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!

从中,可以看出loader的强大作用,分析下:

  1. 转换的作用。开发所用到的都转换成网页加载所必备的html+css+js+img等要求格式的文件。
  2. 转换对象是源代码。loader只对源代码转换,至于其他的功能,plugins就来接收它做不到的地方。

总结一句话:loader, 加载的机器,形象的比喻下,就像一个豆浆机,放上你的原料,它就开始认真的工作了!

常用的loader

1、babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

加载 ES2015+ 代码,然后使用 Babel 转译为 ES5

安装:

npm install --save-dev babel-loader babel-core babel-preset-env webpack

使用:

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2、style-loader

Adds CSS to the DOM by injecting a <style> tag

将模块的导出作为样式添加到 DOM 中

安装:

npm install style-loader --save-dev

建议要与css-loader一起使用

使用:

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3、css-loader

解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码

安装:

npm install css-loader --save-dev

使用:

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4、less-loader

加载和转译 LESS 文件

安装:

npm install --save-dev less-loader less

使用:

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5、url-loader

Loads files as base64 encoded URL

处理图片类文件,但如果文件小于限制,可以返回 data URL

安装:

npm install --save-dev url-loader

使用:

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6、file-loader

Instructs webpack to emit the required object as file and to return its public URL

处理font/svg等,将文件发送到输出文件夹,并返回(相对)URL

安装:

npm install file-loader --save-dev

使用:

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

7、vue-loader

加载和转译 Vue 组件

安装:

npm install --save-dev vue-loader vue vue-template-compiler

使用:

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

至此,有关loader中所用的参数请移步官网查询解决,谢谢查阅!以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 #Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 #Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 #Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 #Javascript
You might like
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
详解package.json版本号规则
2019/08/01 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
从零学Python之hello world
2014/05/21 Python
python中的sort方法使用详解
2014/07/25 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
flask入门之表单的实现
2018/07/18 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
学习十八大报告感言
2014/02/28 职场文书
小学家长学校培训材料
2014/08/24 职场文书
怎么写工作检讨书
2014/11/16 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
硕士学位论文评语
2014/12/31 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript