业精于勤 荒于嬉
webpack 中 常用的 loader
css 模块化：关键 modules:true
-
rules: [{
-
test:
/\.css$/,
-
// loader: 'css-loader'
-
// // loader 的执行顺序是从后向前面
-
// // webpack 遇到自己不认识的文件时 ，先去module找 ，定义的规则里面有没有对应的loader
-
// // css-loader 言简意赅 是把css 模块内容加入到 js 模块中区
-
// // style-loader 从js 中提取css 的 loader ,在html 中创建style 标签
-
use: [
'style-loader',
'css-loader']
-
},
-
{
-
test:
/\.less$/,
-
use: [
'style-loader', {
-
loader:
'css-loader',
-
options: {
-
// 开启 css 模块化
-
// css modules
-
modules:
true
-
}
-
},
'less-loader'],
// 将 Less 文件编译为 CSS 文件
-
},
-
]
-
import css
from
'./css/index.less'
-
console.log(
'index xixi')
-
-
let ele =
`<div class="${css.ele}"> css module</div>`
-
document.write(ele)
file-loader：解析图片 可以设置打包后的图片名称 以及输出路径
-
{
-
test:
/\.(png|jpe?g|jpeg|gif)$/,
// 问号代表可有可无 ？可以同时匹配jpg 和 jpeg
-
use: {
-
loader:
'file-loader',
-
options: {
-
name:
"[name]_[hash:6].[ext]",
-
outputPath:
'images/'
-
}
-
}
-
}
postcss-loader ,autoprefixer ,先安装 再使用
-
const autoprefixer =
require(
'autoprefixer')
-
module.exports = {
-
plugins: [
-
// require('autoprefixer')
-
autoprefixer(
-
// postcss 处理使用autoprefix 添加前缀的标准
-
{
-
//last 2 versions 最新的两个版本
-
// 全球浏览器市场份额大于 1%
-
overrideBrowserslist: [
"last 2 versions",
">1%"]
-
}
-
)
-
]
-
}
file-loader 使用
-
{
-
test:
/\.(png|jpe?g|jpeg|gif)$/,
// 问号代表可有可无 ？可以同时匹配jpg 和 jpeg
-
use: {
-
loader:
'file-loader',
-
options: {
-
name:
"[name]_[hash:6].[ext]",
-
outputPath:
'images/'
-
}
-
}
-
}
引入三方字体的使用也需要用到 file-loader
url-loader 和 file-loader 是包含关系，安装了 file-loader ，直接使用url-loader 是可以的
url-loader把资源文件转换为URL，file-loader也是一样的功能。
不同之处在于url-loader更加灵活，它可以把小文件转换为base64格式的URL，从而减少网络请求次数。url-loader依赖file-loader。
在大多数情况下，使用url-loader准没错。
匆匆忙忙记录一下 ，迎接五一假期了。。。
积跬步 至千里
转载：https://blog.csdn.net/Sandy_zhi/article/details/116307421
查看评论