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 相关文章推荐
原生js实现ajax方法(超简单)
Sep 20 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php 类自动载入的方法
2015/06/03 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python 瀑布线指标编写实例
2020/06/03 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
淘宝好评语大全
2014/05/05 职场文书
海洋科学专业求职信
2014/08/10 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
运动会广播稿20字
2015/08/19 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
MySQL 角色(role)功能介绍
2021/04/24 MySQL