实用指南：webpack继续学习
认识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并且配置资源体积限制实现）
constpath =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"} ] } };更改配置文件成这个样子，然后：
html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Demotitle> head> <body> <script src="../dist/bundle.js">script> body> html>// 导入图片 importimgSrcfrom './img/sss.png'; // 创建img元素 constimgEl =document.createElement('img'); // 设置src属性imgEl.src= imgSrc;// 将图片添加到body中 document.body.appendChild(imgEl);打包后显示：
打包图片有不同的方式：
constpath =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属性
constpath =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
浙公网安备 33010602011771号