原文地址:https://banggan.github.io/2019/04/27/webpack解读之LOADER/
终于忙完了论文,可以愉快的开始学习了,重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行,以webpack4.0为文档进行解读,从简单的概念解读到最后的实现。
整个知识点涉及范围:
使用loader来预处理文件,把不同的静态资源(模块的结尾不是js的模块)打包成js文件
npm install file-loader -D
module.exports = {
//打包项目的入口文件
entry: './src/index.js',
module:{
rules:[{
test:/\.(jpg|png|gif)$/,//打包以jpg、png、gif结尾的所有图片文件
use:{
loader:'file-loader',
options:{//placeholder 占位符
name:'[name]_[hash].[ext]',//保持原图片的名字+hash值和后缀,主要单引号
outputPath:'image/'//打包图片的位置
}
}
}]
}
}
url-loader基本能实现file-loader的打包功能,适用于小图片的打包
所以,当图片的大小小于limit值时会把图片打包成base64格式,大于limit值则按照file-loader打包成图片文件
npm install url-loader -D
module.exports = {
module:{
rules:[{//打包以jpg、png、gif结尾的所有图片文件
test:/\.(jpg|png|gif)$/,
use:{
loader:'url-loader',
options:{//placeholder 占位符
name:'[name]_[hash].[ext]',//保持原图片的名字+hash值和后缀,主要单引号
outputPath:'image/',//打包图片的位置
limit:2048
}
}]
}
}
需要使用css-loader、style-loader
实现方式:
npm install css-loader style-loader -D
module.exports = {
module: {
rules: [{//打包css文件
test:/\.css$/,
use:['style-loader','css-loader']
}]
}
}
需要使用sass-loader、node-sass
npm install sass-loader node-sass -D
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use:['style-loader','css-loader','sass-loader']
}]
}
};
在配置中,有三个loader,执行顺序是从下到上,从右到左。在打包scss文件时,首先执行sass-loader:对sass翻译成css文件,在挂载到css-loader,最后style-loader.
为了兼容不同的浏览器,在写样式的时候需要加上适用不同浏览器的前缀,如-o、-webkit、-moz等
-安装loader实现:npm install postcss-loader autoprefixer -D
-在根目录创建postcss.config.js
moudle.exports ={
plugins:[
require('autoprefixer')
]
}
module.exports = {
module: {
rules: [{
test:/\.scss$/,
use:[
'style-loader',
'css-loader',
'sass-loader',
'postcss-loader']
}]
}
}
modules:true
开启css的模块化打包,在引入的时候注意区分场景:scss文件通过import引入其他scss文件,导致打包的时候引入的scss文件打包错误
实现:importLoader:2
在webpack.config.js中添加loader的配置
module:{
rules:[{//打包scss文件
test:/\.scss$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2,//index.scss中通过import引入其他的scss文件,引入的scss文件在打包的时候也将依次经过所有的loader
modules:true
}
},
'sass-loader',
'postcss-loader']
}]
}
在阿里巴巴矢量图标库中,把需要的字体图标下载到本地,解压。将iconfont.eot iconfont.svg iconfont.ttf iconfont.woff 四种图片文件放入到项目中,在src中新建一个放字体图标的文件夹font。将iconfont.css文件拷贝到项目中,修改对应字体的引用路径。
npm i file-loader -D
module.exports = {
...
module: {
rules: [{
test: /\.(eot|ttf|svg|woff)$/,
use:{
loader:'file-loader'
}
},
]
}]
}
}
如遇到json、scv、xml文件需要打包时,使用csv-loader 和 xml-loader实现。
module.exports = {
module: {
rules: [{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}]
}
}