加载器 Loader
webpack 目前来说只是帮我们打包js文件,其他文件如.css是不认识的。
而通过安装一些加载器Loader,可以帮助webpack认识这些文件,并且一起打包。
====================
webpack 4
css-loader
作用
识别css文件并打包
但是要配合style-loader使用,否则只是识别css文件,但还是无法生效
1、安装
npm install css-loader -D
2、配置
style-loader
作用
1、安装
npm install style-loader -D
2、配置
less-loader
作用
识别和转换less文件
在我们开发中,我们可能会使用less、sass、stylus的预处理器来编写css样式,效率会更高
1、安装
npm install less-loader -D
2、配置
或者同时匹配css或less
PostCSS
作用
1、安装
npm install postcss-loader -D
2、安装插件 autoprefixer (可被替代)
这个插件是自动给css加上浏览器前缀,前缀是为了更好适配各种浏览器,如谷歌、火狐、苹果浏览器等
3、配置
也可以单独把配置抽取到外面,这样这里的代码就不用那么复杂
2、安装插件 postcss-preset-env
npm install postcss-preset-env -D
3、配置
file-loader 图片
作用
打包文件,如图片
常用图片有2种方式
(1)img标签,设置src属性
注意,不能直接imgEl.src = “路径”,这样保存的只是字符串,并不会识别成文件
(2)其他元素如div,设置background-image的css属性;
1、安装
npm install file-loader -D
2、配置
3、打包
会发现随机给我们生成文件的名字,然后放在输出的文件夹内
4、命名规则
file-loader 字体/字体图标
就是设置class
url-loader
作用
url-loader和file-loader的工作方式是相似的,但是可以将较小的文件,转成base64的URI。
base64就是一段文本的代码,一起打包到bundle.js里面,浏览器通过解释这段代码生成图片,这样的好处是减少图片的请求次数,缺点就是增加了单个文件的大小,牺牲了浏览器性能。(base64)
(浏览器引用)
比较适合文件小的而且数量很多的图片文件,因为每一个小图片就是一次网络请求,数量多的话对服务器压力大;
图片大的也可以,但没必要,这样会影响bundle.js 这个文件的大小,下载js代码慢,用户要很久才能看到代码执行。
1、安装
npm install url-loader -D
2、配置
3、limit属性
babel-loader
作用
帮我们把代码做一定的转换,比如ES6+转成ES5,这样兼容更多的浏览器。
也可以查看:https://www.yuque.com/yejielin/mypn47/zu6tft#TAZRU
1、安装
npm install babel-loader @babel/core
如果之前已经安装了@babel/core,那么这里不需要再次安装;
2、配置
虽然配置好,但不使用插件是没办法进行转换的。
3、安装和使用插件
插件要额外安装,可以查看https://www.yuque.com/yejielin/mypn47/zu6tft#l1LAa
安装好后配置好就可以了
4、预设
如果我们一个个去安装使用插件,那么需要手动来管理大量的babel插件,我们可以直接给webpack提供一个
preset,webpack会根据我们的预设来加载对应的插件列表,并且将其传递给babel。
安装装preset-env
npm install @babel/preset-env
配置
其他babel的配置可以查看 https://www.yuque.com/yejielin/mypn47/zu6tft#ucmuF
=========================
webpack 5
也就是webpack5内置了很多常用的loader,让用户不用再下载和配置那么多,体验更好
如url-loader里面关于文件大小的打包和限制