webpack中常用loader
- postcss-loader
在css-loader之前，对css进行一些操作，，，比如统一加前缀，，或者是重置样式，，， 这个postcss-loader会自己去找postcss工具，，找到之后根据插件对样式做处理
命令行使用postcss ：
- 安装postcss 和 postcss-cli
postcss-cli是命令行使用postcss的工具 - 安装postcss使用的插件
npm i autoprefixer -D - 使用。
npx postcss --use autoprefixer -o result.css 源文件css
–use : 表示使用哪个插件处理，，， -o 出口css在哪
在webpack中使用postcss:
postcss-loader中的插件：
- autoprefixer : 为css属性自动添加属性，，只有前缀补全
- postcss-preset-env : 这个插件集成了autoprefixer,除了有autoprefixer特性外，还可以将现代css特性，，更换成旧版本浏览器兼容的代码，，除了前缀补全，还支持现代CSS的降级处理
使用postcss-loader 处理 @import导入的css，，需要在css-loader中配置importLoader，表示，通过@import导入的css，需要重新执行前面的几个loader，，，否则@import导入的css，不会被postcss-loader处理。。。因为第一遍处理的时候，还没有执行css-loader，，也就是@import位置的css，还没被引入
{
test:/\.css$/,// 匹配资源 ===> 匹配到的资源，，用下面的loader处理 ===> 正则表达式
use:[// 先用后面的loader处理，，再用前面的loader
{
loader: "style-loader"
},
{
loader:"css-loader", // 设置loader
options:{
// @import引入的css，，，默认不会执行前面的loader，，， 通过css-loader解析进去css代码后，这部分代码需要前面的loader处理
importLoaders: 1// 如果使用了@Import，，你希望新的css，，回头被postcss-loader处理，，写1:表示被前面一个处理，写2:表示被两个loader处理
} // 这里配置的值会被传入loader中
},
{
loader: "postcss-loader",// 在css使用之前，加前缀，，或者重置样式 ==> 需要依赖别的插件
options:{
postcssOptions:{
plugins:[// 依赖这些插件
// require("autoprefixer"),
require("postcss-preset-env") // 这个里面已经做了 autoprefixer的事情了
]
}
}
}
] , // [useEntry] ===> useEntry是一个对象
}
- file-loader. 和 url-loader
webpack中处理图片，视频，音频，，可以用file-loader,
url-loader可以将指定大小内的图片，，变成base64编码，和页面嵌套在一起，，减少http请求次数，，因为一个图片就是一个http请求，，
webpack默认处理的文件是通过 md4算法，算出来的哈希值，，无法通过名字找到原来对应的资源，，在处理的时候，可以修改处理之后的名字：- [ext] : 扩展名
- [name] ： 生成的文件名字
- [hash] ： md4散列函数处理，生成128个byte，，每四个成为一个16进制的字符，，一共32个字符
- [contentHash]
- [hash:]
- [path] : 相对于 webpack配置文件 的路径
url-loader 可以替换掉file-loader,比file-loader多了一个小文件变成base64编码的功能
file-loader的坑： file-loader，以前的版本，直接通过require引用返回对应的资源，，，新版本将这个对应的资源写在了，返回对象的default属性上
imgEl.src = require("../images/1.png").default
{
test: /\.(jpg|png|jpeg|svg)$/,
use:[
// {
// loader: "file-loader",
// options: {
// // [ext] : 扩展名
// // [name] : 处理文件的名字
// // [hash] : md4的散列函数处理，，生成128位bit，，每四位变成一个16进制字符
// // [contentHash]
// // [hash:<length>]
// // [path] : 文件相对于webpack配置文件的路径
// // img文件夹下面
// name:"img/[name].[hash:6].[ext]", // 使用占位符，，， 将不同的占位符变成不同的名字
// // outputPath:"img" // 输出的路径
// }
// }
{
loader: "url-loader", // 将图片文件 ==》 转成base64编码，，嵌入到js中了 ===》 bundle.js会变得很大，，网页加载时间变长===》 抽出来之后就会有更多的http请求，，每一个图片是一个http请求
options: {
name:"image/[name].[hash:6].[ext]",
limit:10*1024 // 单位： byte 字节
}
}
]
}
但是file-loader 和 url-loader 在webpack5中不怎么用了
webpack5中使用 资源模块类型 asset module type，，，替代上面的这些loader
资源模块类型：
是webpack5中引入的新特性，，用于直接处理静态资源文件，，如，图片，字体，等，，不用使用额外的loader
asset/resource. ===> 类似于 file-loaderasset/inline. ===> 类似于 url-loader， 将较小的文件直接嵌入到html中asset: 通用类型 ==》 自动选择是asset/resource还是asset/inlineasset/source: 文本文件嵌入到代码中
{
test:/\.(jpg|png|jpeg)$/,
// type:"asset/resource", // 相当于 file-loader
// type:"asset/inline", // 直接将资源打包到 代码里面 ===》 url-loader
type:"asset",
generator:{
filename:"img/[name].[hash:6][ext]"
},
parser:{
dataUrlCondition:{
maxSize:20*1024 // 单位byte
}
}
},
{
// 以前通过file-loader 或者 url-loader 做字体文件解析
test:/\.(woff2?|ttf|eot)$/i, // ignore : 忽略大小写
type:"asset/resource", // 打包字体。音频，视频
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
webpack插件的使用
loader和plugin区别： loader是对明确类型的转换，，比如css-loader，file-loader，，url-loader，，加载的时候使用loader
plugin：更加广泛的任务，，，比如，打包优化（将多个转换后的css，整合到一个文件），资源管理，环境变量的注入，
ClearnWebpackPlugin: 每次打包之前，清除之前打包的内容HtmlWebpackPlugin: 根据 ejs模板生成一个index.html，，并且自动引入打包后的js===》 可以自定义index.html的模板DefinePlugin: 允许在编译的时候，创建全局的常量，，这个是webpack内置的插件，无需安装CopyWebpackPlugin: 拷贝指定目录的文件，到打包输出的目录下
const path = require("path");
const { CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {DefinePlugin} = require("webpack")
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
/**
* webpack5 之前 ，，， 加载资源需要使用一些loader，，，比如 file-loader,url-loader,,raw-loader
*
* webpack5 之后： 资源模块类型 ( asset module type) ==> 替代上面的loader
*
*
* asset/resource === 》 file-loader
* asset/inline ===> url-loader
* asset/source
*/
entry:"./src/main.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"./build"),
// assetModuleFilename:"img/[name].[hash:6][ext]" // 设置文件名字
},
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
},
{
test:/\.less$/,
use:["style-loader","css-loader","less-loader"]
},
{
test:/\.(jpg|png|jpeg)$/,
// type:"asset/resource", // 相当于 file-loader
// type:"asset/inline", // 直接将资源打包到 代码里面 ===》 url-loader
type:"asset",
generator:{
filename:"img/[name].[hash:6][ext]"
},
parser:{
dataUrlCondition:{
maxSize:20*1024 // 单位byte
}
}
},
{
// 以前通过file-loader 或者 url-loader 做字体文件解析
test:/\.(woff2?|ttf|eot)$/i, // ignore : 忽略大小写
type:"asset/resource", // 打包字体。音频，视频
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
]
},
plugins:[
new CleanWebpackPlugin(), // plugin都是一个一个的类，，，， 执行类的constructor
new HtmlWebpackPlugin({
title:"hehe",
template:"./public/index.html" // 指定模板
}) // 自动生成一个 index.html ===》 引入了出口js
// ===》 ejs模板，，生成 ===》 根据ejs模板生成这个 index.html
// HtmlWebpackPlugin ===> 之前是手动创建index.html 手动引入js，，， ，，如果多个js很麻烦，，还需要手动将index.html移动进去
//
// DefinePlugin ： 允许我们在编译时，，允许创建全局的常量，，这个是webpack内置的插件，，， mode属性也是用到这个插件的，，，，
// 内置插件，不需要单独引用
,
new DefinePlugin({
// 将字符串里面的东西取出来，，赋值给 BASE_URL
BASE_URL:"'http://localhost:3000'"
}),
new CopyWebpackPlugin({
patterns:[
{
from:"public", // 来自于哪里
// to:"build" // 复制到哪里，，默认会使用根据output对应的路径
globOptions:{
ignore:[// 要忽略哪些东西
"**/index.html",
"**/.DS_Store" // mac会有状态信息===> 忽略前面需要加 **
]
}
}
]
})
]
}