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 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 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中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
安全生产目标责任书
2014/04/14 职场文书
文明村镇申报材料
2014/05/06 职场文书
学生党员公开承诺书
2014/05/28 职场文书
学校与家长安全责任书
2014/07/23 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
运动会1000米加油稿
2015/07/21 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android