当前位置：首页 > news >正文

webpack02

news 来源：原创 2025/5/14 18:58:26

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", // 设置loaderoptions:{// @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-loader
asset/inline. ===> 类似于 url-loader，将较小的文件直接嵌入到html中
asset : 通用类型 ==》自动选择是 asset/resource 还是 asset/inline
asset/source : 文本文件嵌入到代码中

   {test:/\.(jpg|png|jpeg)$/,// type:"asset/resource",  // 相当于 file-loader// type:"asset/inline", // 直接将资源打包到 代码里面  ===》  url-loadertype:"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-loadertype:"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都是一个一个的类，，，， 执行类的constructornew 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_URLBASE_URL:"'http://localhost:3000'"}),new CopyWebpackPlugin({patterns:[{from:"public",  // 来自于哪里// to:"build"  //  复制到哪里，，默认会使用根据output对应的路径globOptions:{ignore:[// 要忽略哪些东西"**/index.html","**/.DS_Store" // mac会有状态信息===>  忽略前面需要加 **]}}]})]}

webpack中常用loader

资源模块类型：

webpack插件的使用

相关文章：