Webpack实战(四):教教你如何轻松搞定-预处理器(loader)
前面三节,我主要给大家分享了有关webpack的一些配置的知识点,如何打包js文件,而如果我们遇到其他类型的资源如图片、css、字体font等等,我们该如何处理呢?今天会介绍预处理器(loader),它赋予了Webpack可处理不同资源类型的能力,极大丰富了其可扩展性。
如果想了解Webpack的基础配置可以参考以下地址:
Webpack实战(一):Webpack打包工具安装及参数配置
Webpack实战(二):webpack-dev-server的介绍与用法
Webpack实战(三):作为前端你不得不懂的Webpack资源入口和出口的配置
loader配置
- loader引入
如果我们要引入css文件,webpack是没法处理的,如
// common.css
body {font-size: 20px;background: #0fc;
}
//index.js
import './common.css'
执行的结果如上图,由此可见,Webpack是无法处理css文件,我们需要给安装预处理css-loader。安装步骤如下
npm install --save-dev css-loader
然后我们将loader 引入项目中,配置webpack.config.js配置如下:
const path = require('path')
module.exports = {context: path.join(__dirname, './src'),entry: {index: './index.js'},output: {path: path.join(__dirname, 'dist'),filename: 'index.js'},mode: 'development',module: {rules: [{test: /\.css$/i,use: [ 'css-loader'],},],}
}
与loader相关的配置都在module对象中,其中module.rules代表了模块的处理规则。每条规则内部可以包含很多配置项,这里我们只使用了最重要的两项—test和use。
- test可接收一个正则表达式或者一个元素为正则表达式的数组,只有正则匹配上的模块才会使用这条规则。 如以/.css$/来匹配所有以.css结尾的文件。
- use可接收一个数组,数组包含该规则所使用的loader,也可以是字符串,对象等。
很多时候,在处理某一类资源时我们都需要使用多个loader。如,对于SCSS类型的资源来说,我们需要sass-loader来处理其语法,并将其编译为CSS;接着再用css-loader处理CSS的各类加载语法;最后使用style-loader来将样式字符串包装成style标签插入页面。
下面引入style-loader,安装命令如下:
npm install --save-dev style-loader
配置代码如下:
const path = require('path')
module.exports = {context: path.join(__dirname, './src'),entry: {index: './index.js'},output: {path: path.join(__dirname, 'dist'),filename: 'index.js'},mode: 'development',module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},],}
}
此时再进行打包,样式就会生效了,应该会看到页面中插入了一个style标签,包含了CSS文件的样式,这样我们就完成了从JS文件加载CSS文件的配置。
打包效果如下图:
运行效果如下图
把style-loader放在css-loader前面,这是因为在Webpack打包时是按照数组从右边往左边的顺序将资源交给loader处理的,因此要把最后生效的放在左边。
loader作为预处理器通常会给开发者提供一些配置项,在引入loader的时候可以通过options将它们传入
module: {rules: [{test: /\.css$/i,use: ['style-loader', {loader: 'css-loader',options: {// 有关css-loader的配置}}],},],}
- 其他配置
exclude与include是用来排除或包含指定目录下的模块,可接收正则表达式或者字符串(文件绝对路径),以及由它们组成的数组
module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],exclude: /node_modules/},],}
exclude规则内的使node_modules中的模块不会执行这条规则。该配置项通常是必加的,否则可能拖慢整体的打包速度。
module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],include: /src/},],}
include代表该规则只对正则匹配到的模块生效。假如我们将include设置为工程的源码目录,自然而然就将node_modules等目录排除掉了。
如果exclude 和include同时存在,则exclude权限比较高
resource与issuer可用于更加精确地确定模块规则的作用范围,在Webpack中,我们认为被加载模块是resource,而加载者是issuer
module: {rules: [{use: ['style-loader', 'css-loader'],resource: {test: /\.css$/i,exclude: /node_modules/},issuer: {test: /\.js$/i,exclude: /node_modules/}},],}
通过添加resource对象来将外层的配置包起来,区分了resource和issuer中的规则,这样就一目了然了。
enforce用来指定一个loader的种类,只接收“pre”或“post”两种字符串类型的值。事实上,我们也可以不使用enforce而只要保证loader顺序是正确的即可。配置enforce主要的目的是使模块规则更加清晰,可读性更强,尤其是在实际工程中,配置文件可能达到上百行的情况,难以保证各个loader都按照预想的方式工作,使用enforce可以强制指定loader的作用顺序。
常用的预处理器
- babel-loader用来处理ES6+并将其编译为ES5,它使我们能够在工程中使用最新的语言特性,同时不必特别关注这些特性在不同平台的兼容问题。
npm install babel-loader babel-core babel-preset-env
- babel-loader:它是使Babel与Webpack协同工作的模块。
- babel-core:顾名思义,它是Babel编译器的核心模块。
- babel-preset-env:它是Babel官方推荐的预置器,可根据用户设置的目标环境自动添加所需的插件和补丁来编译ES6+代码。
配置文件如下:
{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {cacheDirectory: true,presets: [['env', {modules: false}]]}}}
由于babel文件很大没,所以要排除node_modules|bower_components
对于babel-loader本身我们添加了cacheDirectory配置项,它会启用缓存机制,在重复打包未改变过的模块时防止二次编译,同样也会加快打包的速度
babel-loader支持从.babelrc文件读取Babel配置,因此可以将presets和plugins从Webpack配置文件中提取出来,也能达到相同的效果。
- ts-loader
ts-loader与babel-loader的性质类似,它是用于连接Webpack与Typescript的模块,安装命令如下:
npm install ts-loader typescript
webapck.config.js配置如下
rules: [{test: /\.ts$/,use:'ts-loader' }
]
- html-loader
html-loader用于将HTML文件转化为字符串并进行格式化,这使得我们可以把一个HTML片段通过JS加载进来。 - handlebars-loader
handlebars-loader用于处理handlebars模板,在安装时要额外安装handlebars。 - file-loader
file-loader用于打包文件类型的资源,并返回其publicPath。
总结
有关Webpack预处理器(loader)就暂时分析到这里,这仅代表个人观点,欢迎拍砖,如想了解更多请扫描下面:
Webpack实战(四):教教你如何轻松搞定-预处理器(loader)相关推荐
- Webpack实战(五):轻松读懂Webpack如何分离样式文件
在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...
- 父母英语不好,孩子照样行:在家四步轻松搞定英语启蒙 读后感
父母英语不好,孩子照样行:在家四步轻松搞定英语启蒙 读后感 作者:马丁 著 <父母英语不好,孩子照样行:在家四步轻松搞定英语启蒙>重点讲述了在孩子的语言敏感期,家长该如何通过亲子互动的方式 ...
- linux如何解除密码锁屏图案大全,手机锁屏图案(锁屏密码)忘记了怎么办?四种方法帮你轻松搞定...
很多朋友可能为了追求新奇,对手机的各种功能都比较好奇,都想试一试.对于图案解锁这个功能也可能比较喜欢,但会不会就是刚刚设置完了就忘记了呢?那么手机锁屏图案(锁屏密码)忘记了怎么办?本文将为大家介绍四种 ...
- 极光tv显示服务器异常,索尼电视NEWTV极光无法运行?这四招轻松搞定!
原标题:索尼电视NEWTV极光无法运行?这四招轻松搞定! 最近很多索尼用户反映,NEWTV极光在安装后无法运行,这该怎么办呢?下面为大家介绍如何解决这个难题,并分享四个简单的小办法,大家可关注当贝市场 ...
- c# socket接收字符串_socket通信很难?这一文让你轻松搞定!
目录 概述 TCP/IP协议.UDP协议 Socket是什么 socket通信流程 socket编程php代码实战 php7进阶到架构师相关阅读 概述 这是关于php进阶到架构之php7核心技术与最佳 ...
- 图斑从西北角起始编号,可分村分组,从左到右,从上到下的顺序编号。任意起始方位,任意排列方向,亦可轻松搞定。
目录 一.实现效果 二.实现过程 1.获取图斑中心坐标 2.图斑排序 3.创建顺序号 三.成果整理展示 四.总结 在给图斑编号,标BSM时,经常遇到需要按村.从左上方开始,从左向右,从上向下的顺序进行 ...
- 52讲轻松搞定网络爬虫(笔记)
52讲轻松搞定网络爬虫 模块一:爬虫基础原理 1.HTTP基本原理 请求 响应 2.Web网页基础 网页的组成--HTML.CSS.JS 节点树 CSS选择器 3. 了解爬⾍的基本原理 获取⽹⻚: 提 ...
- 函数字节不对齐函数崩溃_Excel中统计字符数,不需要一个一个的数,len函数能轻松搞定...
简介:要统计Excel单元格中的字符数,不需要一个一个的数,利用len函数就能轻松搞定. 问:什么是len函数? 答:自动统计字符数的函数 问:怎样记住len函数 答:len是length(长度)的简 ...
- 九十六、轻松搞定Python中的PPT办公自动化系列
@Author:Runsen @Date:2020/7/14 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
最新文章
- 免费创办网站_足够好的工程来创办一家互联网公司
- vs2015 x86 opencv3.3(编译)
- cuSPARSE库:(六)cusparseMatrixType_t的说明
- PYTHON笔记 面向对象程序设计
- Extjs3.3结合fckeditor2.6.6实现可视化编辑器(java版)
- java mongodb 读取文件_Java操作Mongodb之文件读写
- win10计算机管理字体糊,大神分析win10系统高分屏字体模糊的办法介绍
- 树莓派之Debian游戏(部分)
- [深大深鸿会]利用DevEco Studio从零开发OpenHarmony小游戏——2048(下)
- 计算机是怎么分类,计算机一般按什么分类
- 可编程渲染管线10 多细节层次(LOD)
- 尼基塔·丹尼诺夫《梦想者》
- python constants_Python constants.SUCCESS属性代码示例
- SPSS免费安装教程(详细版)
- 小程序webview关注公众号_微信小程序和公众号互相跳转
- 算法复杂性分析及运算规则证明(一)
- android仿空间短视频播放
- 【Linux命令】modprobe命令
- 洛谷P4316 绿豆蛙的归宿
- 读取文件解析文件发生的错误,已解决
热门文章
- 安全狗导致php错误,服务器安全狗导致ASP.NET网站运行出错的一个案例
- java 模拟栈底层用数组_java用数组模拟栈
- imos style android,自定义的第一个view
- macOS开启内建的TFTP服务器
- tablayout 动态改变标题_TabLayout(动态添加自定义tab)+ViewPager
- 用位运算将十进制转为二进制python_python 十进制与二进制以及位运算
- 【雕爷学编程】Arduino动手做(16)---数字触摸传感器
- C# 运行控制台程序中文乱码
- MongoDB开发环境搭建(windows)
- Spring_自动装配