webpack常用loader
程序员文章站
2024-02-11 11:14:28
...
postcss -loader
打包css样式,自动添加前缀
直接在匹配css文件下,添加使用这个loader就可以了
注意:postcss-loader要在css-loader下面即先添加前缀再打包
babel-loader @babel/core @babel/preset-env
es6转es5yarn add babel-loader @babel/core @babel/preset-env -D
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
}
打包结果
file-loader or url-loader
打包图片文件
一般图片打包使用的是url-loader。她有一个好处就是可以设置当打包图片小于某个值时,选择把他打包成base64或者图片
(打包成base4比原图大三分之一)
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
limit: 1, //超过1b就打包图片
outputPath: '/img/',
// publicPath: 'http://localhost:3001' //为图片添加公共路径
}
}
]
},
html-withimg-loader
打包html文件中的图片
// 打包html中的图片
{
test: /\.html$/,
use: ['html-withimg-loader']
},
style-loader
使用多个将样式自动注入DOM <style></style>。这是默认行为。
{
loader: 'style-loader',
//解析的css文件插入位置
options: {
insert: 'top' //选择插入标签的地方
}
},
上一篇: webpack学习4-手写loader