共计 7086 个字符，预计需要花费 18 分钟才能阅读完成。
webpack5(Loader)
一、webpack 倒退
古代 Web 开发 ” 问题 ”：
采纳模块开化开发
应用新个性性进步开发效率
实时监控开发过程应用热更新
我的项目后果打包压缩优化应用 webpack 实现我的项目我的项目工程化
1.Webpack 性能
打包：将不同类型的资源按模块的解决进行打包
动态：打包后最终产出动态资源
模块：webpack 反对不同标准的模块化开发（兼容多种模块导入模式）2.Webpack 配置文件
在我的项目根目录下，新建 webpack.config.js 配置文件，应用 webpack 命令打包时，会主动应用该配置文件打包我的项目
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{path:path.resolve(__dirname,'dist'), // 这里必须要配置为绝对路径
filename:'bundle.js'
}
}指定配置文件打包：
webpack --config lg.webpack.js二、Loader 应用
1.cssLoader 的应用
未应用 css-loader 之前的代码：
import '../css/login.css';
function login() {const oH2 = document.createElement('h2');
oH2.innerHTML = '江江学前端';
oH2.className = 'title';
return oH2;
}
document.body.appendChild(login());css-loader 能够将文件从不同的语言 css 转换为 JavaScript
装置 css-loader：
yarn -D add css-loader应用 css-loader
行内应用：
import 'css-loader!../css/login.css';
// css-loader 只将 css 解决成以后 js 能够辨认或解决的模块类型，不会将 css 文件导入进 index.html 中
// style-loader 将 css 插入到 head 中配置到配置文件中应用：
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {path: path.resolve(__dirname, 'dist'), // 这里必须要配置为绝对路径
filename: 'bundle.js'
},
module: {
rules: [
// {
// test: /\.css$/, // 个别就是一个正则表达式，用来匹配文件类型
// use: [
// {
// loader: 'css-loader'
// }
// ]
// }
// 简写 只应用一个 loader 解决
{
test: /\.css$/,
loader: 'css-loader'
}
// 简写 是、应用多个 loader 解决, 但个别不应用参数
// {
// test: /\.css$/,
// use:[
// 'css-loader',
// ]
// }
]
}
}2.style-loader 应用
style-loader 的作用：
在 head 标签中插入一个 style 标签，并填入解决好的 css 款式
下载：
yarn -D add style-loader配置 loder:
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // loaders 的执行程序是从右到左
}
]3.less-loader 应用
less-loader 的作用：
外部调用 less，将 less 代码编译成 css 代码装置：
yarn -D add less less-loader配饰 loader:
rules: [
{...},
{
test: /\.less$/,
use: ['style-loader', 'css-loader','less-loader']
// 1 先应用 less-loader 去调用 less，将 less 解决成 css
// 2 应用 css-loader 将 css 变成 js 能解决的模块
// 3 交给 style-loader，将 css 放入 html 的 head 元素中
},
]4.browserslistrc 应用
browserslistrc 性能：
/**
* 1 工程化
* 2 兼容性：CSS JS --> 前缀解决展现网站：http://autoprefixer.github.io/
* 3 如何实现兼容？--> Autoprefixer、post-preset-env、postcss babel
* 4 到底兼容那些平台？--> 兼容市面上一些支流的浏览器平台 caniuse.com 各种浏览器应用占比：https://caniuse.com/usage-table
*
*
* >1% 市场占有率大于 1%
* default 市场占有率大于 0.5%，采纳最新的两个版本，firefix,not dead
* dead 24 个月没有官网反对更新的浏览器，就代表死掉了
* last 2 versions 浏览器最新的两个版本
*/在 package.json 中配置 browserslist:
{
...
"browserslist":[
"> 1%",
"last 2 versions",
"not ie <= 8",
"not dead"
]
}或者在我的项目根目录下新建.browserslistrc 配置文件：
> 1%
last 2 version
not dead
not ie <= 85.postcss 应用
#12345678是 rgba 的模式
postcss 简述：
1 postcss 是什么：通过 javascript 转换款式的工具
2 less(less-loader) --> css --> css-loader
3 postcss-preset-env 汇合了很多的古代 css 转换所须要的插件
4 postcss 性能：做一些 css 款式兼容性的操作，如 给款式针对浏览器增加不同的前缀、给 css 款式的重置解决
5 应用 autoprefixer + browserslistrc + postcss 即可给 css 款式代码的前缀做兼容性解决装置 postcss:
yarn -D add postcss如果要在命令行中间接应用 npx postcss，还须要装置 postcss-cli：
yarn -D add postcss-cli装置 autoprefixer：
yarn -D add autoprefixer装置工具性能阐明：
postcss 相似于一个解决 css 的转换工具平台
postcss-cli 让 postcss 能够间接在命令行中应用
autoprefixer 依据.browserslistrc 提供的兼容条件，给 css 款式正对不同浏览器增加前缀
命令工具应用：
npx postcss --use autoprefixer -o ret.css .\src\css\test.csspostcss-loader 解决流程：
postcss 须要在 css-loader 之前对 css 对兼容性解决
css-loader 将 css 变成模块
style-loader 将 css 放入 html 中在 webpack.config.js 配置 postcss-loader:
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options:{
postcssOptions:{
plugins:[// require('autoprefixer'),
// require('postcss-preset-env'),
// postcss-preset-env 曾经蕴含了 autoprefixer
// 可简写
'postcss-preset-env'
]
}
}
}]
}
]
}应用 postcss.config.js 独自配置插件信息：
module.exports = {
plugins:[require('postcss-preset-env')
]
}而后 webpack.config.js 的配置文件可简写了：
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
},
]
}6.importLoaders
问题：
by.css:
@import './test.css';
.title{border: solid 20px #12345678;}test.css:
.title{
display: grid;
transition: all .5s;
user-select: none;
}test 局部的 css 不会被 postcss-loader 解决
问题溯源：
应用 importLoaders:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options:{importLoaders: 1 // importLoaders 的作用是决定 @import 模块在应用 css-loader 前，要应用几个其它的 loaders 解决。}
},
'postcss-loader',
]
}7.file-loader 解决图片
a. 加载图片资源
file-loader 在 webpack.config.js 中的配置：
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {path: path.resolve(__dirname, 'dist'), // 这里必须要配置为绝对路径
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
...
{test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {esModule: false // 不转为 esModule}
}]
}
]
}
}创立一个解决 img 的 js：
function packImg(){
// 01 创立一个容器元素
const oEle = document.createElement('div');
// 02 创立一个 img 元素
const oImg = document.createElement('img');
oImg.src = require('../img/01.png').default; // 不应用 default 时，须要配置 file-loader 参数
oEle.appendChild(oImg);
return oEle;
}
document.body.appendChild(packImg());应用 esModule 的形式导入，则不必.default：
import oImgSrc from '../img/01.png';
oImg.src = oImgSrc;
css-loader 会将 url 替换成 require, 进而被打包成 es 模块语法
配置：
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1, // importLoaders 的作用是决定 @import 模块在应用 css-loader 前，要应用几个其它的 loaders 解决。esModule:false // css 中导入图片时，会主动将 url 图片引入变成 require 语法，进而编译成 esMoudule 语法，这样就会报错，所以须要设置为 false
}
},
'postcss-loader',
]
},图片资源导入总结：
/**
* 打包图片：* - img src
* + 应用 require 导入图片，此时如果不配置 esModule:false, 则须要 .default
* + 也能够在配置中设置 esModule:false
* + 应用 import 导入图片，此时不须要 .default
* - background url
* + 须要间接返回资源，不须要转成 seModule, 不须要 .default，在 css-loader 中须要配置 esModule:false
*/b. 设置图片名称与输入 tscproj
解决出片名称配置：
{test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {name: '[name].[hash:6].[ext]', // name: 'imgs/[name].[hash:6].[ext]', 这样配置，则不须要再配置 outputPath 了
outputPath:'imgs/'
}
}]
}
]设置图片名称罕用占位符：
/**
* [ext]: 源文件扩展名
* [name]: 文件名
* [hash]: 文件内容的的 hash 值
* [contenthash]: 文件内容的 hash 值
* [hash:<length>]: 只取 hash 的前 length 位
* [path]: 文件门路
*/8.url-loader 解决图片
简述 url-loader 性能：
url-loader:
长处：将图片转为 base64 编码，能够内嵌到 html 或 css 中，缩小 http 申请
毛病：图片转 base64 编码后，大小会变大，文件大小约为原来的 1.3 倍，浏览器能够应用的文件大小有限度。图片很大时，网页的显示将变慢
资源不会被浏览器缓存，每次拜访都要从新获取
应用 url-loader 后的配置：
{test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {name: '[name].[hash:6].[ext]', // name: 'imgs/[name].[hash:6].[ext]', 这样配置，则不须要再配置 outputPath 了
outputPath: 'imgs/',
limit: 10 * 1024
}
}]
}url-loader 与 file-loader 的区别与分割:
区别:
url-loader: 将图片编码，间接放入 css 或 html 中
file-loader: 复制图片，放入 dist 目录下的指定目录中，资源离开申请
分割：配置参数基本相同
url-loader 外部能够调用 file-loader, 依据 limit 值，决定是否复制图片或者将图片编码
了解图片 Base64 编码数据格式参考：https://www.jianshu.com/p/c42…
9.asset 解决图片
asset type module 是 webapck5 的内置解决办法a. 解决图片
性能介绍：
/**
* asset module type
* 01 asset/resource => file-loader 指标资源拷贝
* 02 asset/inlinet => url=loader 指标资源内联
* 03 asset/source => raw-loader 指标资源源码
* 04 asset/ 管制应用 loader 指标资源管制应用 loader
*/应用 asset 解决图片资源的 asset/resource 配置（可全局或部分设置 asset 模块解决过的文件）：
module.exports = {
...
output: {
...
// assetModuleFilename: 'assets/[name].[hash:4][ext]' // 全局设置 asset 模块解决的文件寄存地位 {这里的[ext] 蕴含了 '.' 如：'.png}
},
module: {
rules: [
...
{test: /\.(png|jpg|gif)$/,
type:'asset/resource',
generator:{filename:'imgs/[name].[hash:4][ext]',
}
}
]
}
}asset/inline 配置：
{test: /\.(png|jpg|gif)$/,
type:'asset/inline',
}asset 配置：
{test: /\.(png|jpg|gif)$/,
type: 'asset',
generator: { // 做拷贝时的命名规定
filename: 'imgs/[name].[hash:4][ext]',
},
parser:{ // 设置做拷贝的条件
dataUrlCondition:{maxSize:10*1024 // 小于该值时，做 dataURL}
}
}b. 解决图标字体
创立一个解决图标字体的 js:
import '../font/iconfont.css';
import '../css/index.css'; // 定义 icon 的款式
function packFont(){const oEle = document.createElement('div');
const oSpan = document.createElement('span');
oSpan.className = 'iconfont icon-music lg-icon'; // lg-icon 用来管制 icon 款式
oEle.appendChild(oSpan);
return oEle;
}
document.body.appendChild(packFont());配置 asset，让其能解决图标字体文件：
{test: /\.(woff2?|eot|ttf|otf)$/,
type:'asset/resource', // 图标字体文件，只须要拷贝到 dist 目录即可
generator: {filename:'font/[name].[hash:3][ext]'
}
}
正文完
