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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
Node.js返回JSONP详解
May 18 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
解决layui表格的表头不滚动的问题
Sep 04 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中unserialize返回false的解决方法
2014/09/22 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
一步步教你用Python实现2048小游戏
2017/01/19 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python实现中文文本分句的例子
2019/07/15 Python
is_file和file_exists效率比较
2021/03/14 PHP
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
护士演讲稿范文
2014/01/05 职场文书
销售助理岗位职责
2014/02/21 职场文书
水利水电专业自荐信
2014/07/08 职场文书
装修施工安全责任书
2014/07/24 职场文书
师德承诺书2015
2015/04/28 职场文书
财务管理制度范本
2015/08/04 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016党校学习心得体会
2016/01/07 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技