黑马前端学习笔记（从vue2.0到vue3.0）第二天P22-P32

P22 知识点 url-laoder的limit选项

在配置类中的module的rules的test转换图片的loader中limit代表只有<=大小的图片才会被转成base64格式的图片 loader后面带问号？单位是字节（baye）

P23知识点 高级语法

新名词：@info 装饰器

功能：可以为目标添加静态属性（有点类似java中的继承）

在文档中有波浪线可能是警告

      装饰器运行需要安装对应的依赖包

     npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在配置类中加一条

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

exclude：排除那个路径 第三方包node_modules的js兼容性不需要你来弄

在项目根目录新增babel.config.js

在新增的js增加 （记得保存）意思为声明插件

module.exports={

    Plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]

}

运行成功

P23 在第二题中出现BUG

经过我仔细研究后发现 babel.config.js 中括号写错了 

易错的地方 ： 中文标点符号，在写新配置后没写逗号 

P24知识点 打包

在json中增加

"build":"webpack --mode production"

在build中的mode后面 会重写 配置中的 mode

P25知识点 优化打包

图片增加

outputPath=images

输入的文件夹到images文件夹中

P26知识点 自动删除生成dist包

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

在plugins中增加 [new CleanWebpackPlugin()]

详情见 https://www.npmjs.com/package/clean-webpack-plugin

每次打包原先的dist删除然后生成新的包

P27知识点  总结打包

在package.json文件的scripts节点下 带serve 生成到虚拟磁盘 反之亦然

但是 不带serve 他不优化 导致体积大 

带--mode produvtion 重写 mode 打包优化体积小

P28知识点 Source Map

在webpack.config.js 中增加

devtool:'eval-source-map',

P29与P30知识点 Source Map

发布之后 只提示行号 不暴露源代码

 需要将设置改为

devtool:'nosources-source-map',

或者直接关闭Source Map 行号都不显示

设置成“source-map” 在本地也能查看行号与源代码 适合找BUG

p31  知识点

在引入中“ ../ ”代码以自己为中心 往上翻一层

例如在info.js 引入mag.js 

这样很麻烦 而且不容易找到对应位置 所以我们用‘@’简写

在webpack.config.js 的module平级下新建

resolve:{

           alias:{

               '@':path.join(__dirname,'./src/')

           }

      }

代表@符号表示src 目录

info.js修改为

成功运行

P31 遇到BUG

上方提示成功 然后显示无法识别@符号 

我看了三遍视频 才发现 返回上一级是 ../  而@配置这里写的是 ./

这是老师的原版视频 其实他就是写了一个

改为./后

我估计他是和我一样的问题！！

P32 在谷歌安装插件

可以在下方下载插件 需要微信登陆一下

https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521

原理学习完毕  下面正式开始vue学习