认识PostCSS工具
PostCSS是一个通过JS来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式的重置
实现这些功能需要借助于PostCSS对应的插件
自动添加浏览器前缀需要：
npm install autoprefixer单独的postcss配置文件
我们可以将这些配置信息放到一个单独的文件中进行管理
在根目录下创建postcss.config.js
module.exports = {
plugins:[
require("autoprefixer")
],
}postcss-preset-env
在配置postcss-loader的时候，我们配置插件并不需要使用autoprefixer，可以使用postcss-preset-env
preset是预设的意思
postcss-preset-env也是一个postcss的插件
它可以帮助我们将一些现代的css特性转成大多数浏览器认识的css，并且会根据目标浏览器或者运行时环境添加所需的polyfill
会自动帮助我们添加autoprefixer（相当于已经内置了autoprefixer）
首先安装postcss-preset-env
npm install postcss-preset-env -D之后我们修改掉之前的autoprefixer
Webpack打包图片-JS-Vue
css浏览器前缀 在现代的前端开发模式中，不需要手动的添加浏览器前缀
加载图片案例准备
npm install file-loader常见的使用图片的方式是两种：
img元素，设置src属性
其他元素，设置background-image的css属性
asset module type
在Webpack5之前，加载这些资源需要使用一些loader，比如说raw-loader、ul-loader、file-loader
在Webpack5开始，我们可以直接使用资源模块类型来替代上面的这些loader
资源模块类型
asset/resource发送一个单独的文件并导出URL（之前用file-loader实现）
asset/inline导出一个资源的data URL（之前用url-loader实现）
asset/source导出资源的源代码（之前用raw-loader实现）
asset在导出一个data URL和发送一个单独的文件之间自动选择（之前用url-loader并且配置资源体积限制实现）
const path = require('path');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/index.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
]
},{
test: /\.less$/,
use:[ "style-loader","css-loader","less-loader"]
},
{
test:/\.(png|jpe?g|svg|gif)$/,
type:"asset"
}
]
}
};更改配置文件成这个样子，然后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Demo</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>// 导入图片
import imgSrc from './img/sss.png';
// 创建img元素
const imgEl = document.createElement('img');
// 设置src属性
imgEl.src = imgSrc;
// 将图片添加到body中
document.body.appendChild(imgEl);打包后显示：
打包图片有不同的方式：
const path = require('path');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/component/cpns.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
]
},{
test: /\.less$/,
use:[ "style-loader","css-loader","less-loader"]
},
{
test:/\.(png|jpe?g|svg|gif)$/,
//打包两张图片，并且这两张图片有自己的地址，将地址设置到img/bgi中
type:"asset/resource"
//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中
//type:"asset/inline"
}
]
}
};上面那种方式的缺点就是多图片加载要两次网络请求
下面这种方式也有缺点，缺点是造成js的文件非常大，下载js文件本身消耗时间非常长，下载和解析的执行时间都很长
所以我们要进行合理的规范
对于小一点的图片，可以进行base64编码
对于大一点的图片，单独的图片打包，形成url地址，单独的请求这个url图片
自定义文件输出路径和文件名
方式一：修改output，添加assetModuleFinename属性
方式二：在Rule中，添加一个generator属性，并且设置filename
有几个常用的placeholder：
ext（处理文件的扩展名）、name（处理文件的名称）、hash（文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值，32个十六进制）
url-loader的limit效果
在开发中我们往往是小的图片需要转换，但是大的图片可以直接使用图片
小的图片转换base64之后可以和页面一起请求，减少不必要的请求过程
大的图片也进行转换，反而会影响页面的请求速度
我们要两个步骤来实现
一：将type修改为asset
二：添加一个parser属性，制定dataUrl的条件，添加maxsize属性
const path = require('path');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/component/cpns.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// assetModuleFilename: 'abc.png'
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
]
},{
test: /\.less$/,
use:[ "style-loader","css-loader","less-loader"]
},
{
test:/\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource',
//打包两张图片，并且这两张图,
//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中
//type:"asset/inline"
parser:{
dataUrlCondition:{
maxSize: 60 * 1024
}
},
generator:{
//不写死，使用占位符
//name:指向原来的图片名称
//ext：扩展名
//hash:webpack生成的hash值
filename:"img/[name]_[hash:8][ext]"
}
}
]
}
};这样进行打包，打包结束之后会在前面生成一个img文件夹
babel
开发中想要使用es6+的语法，想要使用typescript，开发React项目，都是离不开babel的
所以学习babel对于我们理解代码编写到线上的转变过程很重要
babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的JS，包括语法转换和源代码转换等
babel命令行的使用
babel本身可以作为一个独立的工具，不和webpack等构建工具配置来单独使用
如果我们希望在命令行尝试使用babel，需要安装下面的库：
@babel/core：babel的核心代码，必须安装
@babel/cli：可以让我们在命令行中使用babel
npm install @babel/cli @babel/core -D使用babel来处理我们的源代码
src是源文件的目录
--out-dir指定要输出的文件夹dist
插件的使用
我们需要转换箭头函数，就可以使用箭头函数转换相关的插件
npm install @babel/plugin-transform-arrow-functions -Dnpx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions查看转换后的结果我们会发现const没有转成var
plugin-transform-arrow-function并没有提供这样的功能
我们需要使用plugin-transform-block-scoping来完成这样的功能
npm install @babel/plugin-transform-block-scoping -Dnpx babel src --out-dir --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions当要转换的内容过多的时候，一个一个设置就比较麻烦了，可以用预设
安装@babel/preset-env预设
npm install @babel/preset-env -Dmodule.exports = {
plugins: [
"babel/plugin-transform-arrow-functions",
"babel/plugin-transform-block-scoping",
],
presets:[
"@babel/preset-env"
]
}在提供了preset之后，webpack就会根据我们的预设来加载对应的插件列表，并且将其川第一给babel
常见的预设有：
env
React
TypeScript
