webpack常用loader
postcss -loader
【webpack常用loader】打包css样式，自动添加前缀
直接在匹配css文件下，添加使用这个loader就可以了babel-loader @babel/core @babel/preset-env es6转es5
注意：postcss-loader要在css-loader下面即先添加前缀再打包
yarn add babel-loader @babel/core @babel/preset-env -D{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
}
打包结果
文章图片
图片.png 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 。这是默认行为。
{
loader: 'style-loader',
//解析的css文件插入位置
options: {
insert: 'top'//选择插入标签的地方
}
},
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 数组常用方法一
- 常用git命令总结
- java|java 常用知识点链接
- ImageLoaders 加载图像
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- c#常用网址记录
- 5|5 个 PPT 常用快捷键带你从此走向高效
- Python|Win10下 Python开发环境搭建(PyCharm + Anaconda) && 环境变量配置 && 常用工具安装配置
- iOS常用第三方库