未经作者允许请勿转载
更好的阅读体验查看我的博客原文
这节主要讲一讲一些常见的Loder的使用。包括file-loader、url-loader以及css-loader和style-loader。
Loader
file-loader
上一节简单介绍了webpack是什么，webpack是一个模块打包器，可以将es的模块文件进行打包。上一节我们只打包了js文件，那我们能不能打包其他类型的文件呢，先来试一试打包图片吧。
这里使用到了file-loader
npm i file-loader -D
{% tabs 1 %}
// ES Moudule 模块化引入
import ComponentB from './componentB';
var root = document.getElementById('root');
// CommonJs 模块引入
var ComponentA = require('./componentA');
var img1 = require('./IMG_3294.jpg');
console.log(img1);
var img = new Image();
img.src = img1;
root.append(img);
new ComponentA();
new ComponentB();
const path = require('path');
module.exports = {
mode: 'development', // 默认为production
entry: {
main: './src/index.js' // 打包入口文件
},
module: {
rules: [
{
test: /\.jpg$/,
use: {
loader: 'file-loader'
}
}
]
},
output: { // 输出文件配置
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
{% endtabs %}
npm run build进行打包，我们看一下控制台打印出来的img1
这里可以看到img1是一个Module。
我们可以通过img1.default来获取路径或者直接通过import形式来引入，这样图片就成功得显示出来了😄
import img1 from './IMG_3294.jpg'
通过这个例子可以知道了loader的大致作用方法了，通过test来匹配特定文件使用（use)特定的loader来对文件进行打包处理。
我们再看一下打包出来的文件
dist
├── a2099657cfcaf9f019ccf08e9dc8747d.jpg
├── bundle.js
└── index.html
发现我们的图片名称被改变成了一长串字符，那我怎么让它不改变名字呢。这时候loader的options就派上用场了😎
rules: [
{
test: /\.(jpg|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}
]
这里的[name]和[ext]是loader中的placeholder,分别表示文件的名字和后缀名，当然loader中还有很多的placeholder。
设置好后进行打包得到如下结果
dist
├── bundle.js
├── IMG_3294.jpg
└── index.html
现在有一个问题，当我们的图片一旦多起来那全部打包放在根目录下拿岂不是很乱，这个时候就可以使用options中的output来规定经过loader处理后的输出路径了。
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
打包看一下结果成功👌，运行一下html文件图片也可以正常显示。
dist
├── bundle.js
├── images
│ └── IMG_3294.jpg
└── index.html
到这里我们就了解了file-loader的基本使用了。
url-loader
url-loader也可以打包文件，但是和file-loader不同的是，它会将我们的图片转化成base64编码，那如果我不想转化呢，我们可以使用options中的limit属性来限制文件在小于多少时转化成base64编码，一旦大于这个值打包出来的效果就和file-loader一样了。
看一下例子就清楚了
npm i url-loader -D
这里准备两个图片，一个大小300k，一个大小7k
webpack配置
const path = require('path');
module.exports = {
mode: 'development', // 默认为production
entry: {
main: './src/index.js' // 打包入口文件
},
module: {
rules: [
{
test: /\.(jpg|png)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}
]
},
output: { // 输出文件配置
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
看一下打包后的文件
dist
├── bundle.js
├── images
│ └── 300k.jpg
└── index.html
结果是大于10240的300k.jpg文件被以图片形式打包出来了，那7k.jpg文件去哪了呢，我们在bundle.js文件中可以找到了它，它被转化成了base64编码。
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD...
当然limit也可以设置为true/false，更多配置
我在操作中发现了如果html中没有使用到7k.jpg，url-loader是不会对它进行打包的。
{% note info, 这里并不建议把大文件转化为base64，这样会增加bundle.js的体积，对项目优化不太友好 %}
样式文件
接着上面的例子，我现在想要为页面中的图片添加一些样式
{% tabs 2 %}
// ES Moudule 模块化引入
import ComponentB from './componentB';
import './index.css';
var root = document.getElementById('root');
// CommonJs 模块引入
var ComponentA = require('./componentA');
import img1 from './300k.jpg';
console.log(img1);
var img = new Image();
img.src = img1;
img.classList.add('circle');
root.append(img);
new ComponentA();
new ComponentB();
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
{% endtabs%}
现在我想要打包css文件该怎么办呢😶，我们要用到两个loader，css-loader和style-loader
安装
npm i style-loader css-loader -D
webpack配置
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
打包成功，打开网页看一看效果生效了
这里简单介绍一下style-loader和css-loader的作用，首先它们执行有先后顺序的，先使用css-loader对css文件进行打包，再用style-loader把打包后的css文件内容以<style></style>加到页面的header中。
{% note info, 有时候我们要为css加上浏览器引擎前缀-webkit，这里有一个loader可以帮我们完成postcss-loader %}
安装
npm i postcss-loader autoprefixer -D
webpack配置
{
test: /\.css$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
ident: 'postcss',
pulgins: [
require('autoprefixer')
]
}
}],
},
这里貌似有点问题，后期我再研究研究。
扩展
css模块化
先看一个场景
{% tabs 3%}
import './index.css';
import img1 from './300k.jpg';
import ComponentA from './componentA';
var root = document.getElementById('root');
var img = new Image();
img.src = img1;
img.classList.add('circle');
root.append(img);
ComponentA();
import img1 from './300k.jpg';
function ComponentA() {
var img = new Image();
img.src = img1;
img.classList.add('circle');
var root = document.getElementById('root');
root.append(img);
}
export default ComponentA;
{% endtabs %}
我们看到circle样式同样作用在了componentA上了，也就是说circle已经等同于是全局样式了😥。还好我们可以通过配置css-loader的options来使用css的模块化来解决这个问题。
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
pulgins: [require('autoprefixer')],
},
},
],
},
配置好后我们在要使用样式的地方使用下面这种写法
import circle from './index.css';
img.classList.add(circle.circle);
这样我们再修改样式就不会影响到其他地方了。
css外部引入
这里主要介绍css-loader的optionsimportLoaders。
我们在index.css文件中引入外部css文件
@import './import.css';
假设我们有以下几个loader处理css文件
['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
当webpack处理index.css文件时按照postcss-loader->sass-loader->css-loader顺序来执行css文件的
当遇到@import时处理import.css时，如果不做处理的话，import.css将直接从css-loader开始处理的，那我想让它从postcss-loader从头处理的话就要设置imortLoaders数目了。
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
这里的1表示处理@import引入的css文件是，先要被前面的1个loader处理，也就是import.css的处理顺序是sass-loader->css-loader-style-loader。
处理字体文件
直接使用file-loader处理就可以了
{% tabs 4 %}
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader',
},
},
import './font/iconfont.css';
var root = document.getElementById('root');
root.innerHTML = '<div class="iconfont icon-smile"></div>'
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1589604469136'); /* IE9 */
src: url('iconfont.eot?t=1589604469136#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,这里base64代码太长删除掉了') format('woff2'),
url('iconfont.woff?t=1589604469136') format('woff'),
url('iconfont.ttf?t=1589604469136') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1589604469136#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-smile:before {
content: "\e783";
}
{% endtabs %}
ok!这章到此介绍。现在我们已经能够处理一些常见文件的打包了，对webpack的认识也应该算一个简单的入门了。😁
3452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
