ctrl+c连按两下终止
node_modules 运行npm install即可
模块化：JS的复用
组件化：UI样式的复用
Webpack： 前端工程化具体解决方案
gulp：前端自动化任务管理工具（旧）
webpack核心: 模块化 (互相依赖强)
- 模块指css / 图片
- webpack核心为模块化开发：处理模块间的依赖关系
- 代码压缩、处理兼容性问题（高级语法开发效率快，转成低级语法解决浏览器兼容性问题）、性能优化
- 模块化后打包， 主要功能是（将代码 / 图片）压缩，TS转JS等过程只是附加作用
gulp核心: Task自动化
- task流程自动化,要处理图片压缩, ts转化等,gulp依次执行这些task,让整个流程自动化
- 对于gulp： 模块化不是核心
webpack模块化打包必须依赖node环境
node依赖各种包,自带npm(node package manager)工具管理包,本身由js写的,自带浏览器?
①目录不能出现中文，否则报错，可右键管理员打开。包管理文件是记录安装了哪些包的
②src为程序员写的源代码（固定文件夹名）
④ul>li { 第$个li }*9
⑤-S可省略 全写为--save
⑥import $ from 'jquery'
报错，SyntaxError为语法错误，使用webpack解决jQuery兼容性问题
Webpack
安装
npm install [email protected] [email protected] -D
- -D：--save-dev的简写 与-S不同的是
- -S保存到dependencies，开发和上线需要的包
- -D记录到devDependencies，指只在开发阶段的包
配置
- npm run dev后读取webpack.config.js配置，再根据配置运行webpack
- 然后出现文件夹dist，script的src改成dist里的main.js文件解决兼容性
webpack为什么默认处理index.js？
- src，index.js...都是默认的名字！！可修改
entry表示指定要处理的文件
__dirname表示当前文件的存放路径
但是每次修改都要重新npm run dev(配置的指令)，导入插件 webpack-dev-server 安装配置
插件
webpack-dev-server
安装
npm install [email protected] -D
- 这个插件会把生成的（output）放在内存里（因为内存快，是虚拟的，便于开发）
- 其他包在磁盘里，频繁的读写物理磁盘会影响寿命和性能
配置
- 不能在live server中查看了，原先的是file协议，使用插件后只能通过http查看
-
根目录下并没有出现bundle.js ， 只能手动在浏览器输入 /src
-
浏览器特性：打开文件夹，自动打开index文件
- 由图所示，显示生成的bundle.js在根目录下
- 但是vscode中看不见，只能在浏览器上上手动 / bundle.js
- npm run dev运行后 只要修改index.js，cmd就会自动Compiling（编译），页面也会自动刷新
由于每次通过8080只能看到目录页，我们安装一个插件，将index复制到根目录下直接打开
html-webpack-plugin
安装
npm install [email protected] -D
配置
- 导入构造函数 => 创建实例对象 => 指定参数 => 用node.js导出语法,配置webpack
- webpack中，一切皆模块，都可以导入
- run一下，目录下没有出现，所以在内存里
- 无需自己src引入
run运行后自动打开端口
方法①：dev里面加 --open
方法②：配置devServer
loader ：指的是处理一些css、less等非js的文件
webpack处理入口是index.js
安装
npm i [email protected] [email protected] -D
配置
less是内置依赖项，less-loader依赖于less
- 不用from：因为只需加载，无需结果，接受打印的结果为undefined
- 内部导入后转成类似于js的模式
base64图片的优缺点：
- 每次src一个图片路径服务器都要发送一次请求，影响性能，不友好
- 另一个解决办法：精灵图 把小图片都放在一个大图片用定位解决
- 但是base64图片字符串过多，不适合大图片
-
- 导入的logo是base64字符串
- ajax 在URL中导入参数就需要？问号
- ？limit = 470 （字节大小）超过时使用路径导入，小于等于的话转成base64
babel-loader
-
装饰器属于高级语法，webpack无法解析
- 这里@定义装饰器（react高级语法）
- @应用给谁，参数就指向谁
-
这里装饰函数装饰了Person类
target指向Person
Person虽然是空对象，但target添加了info属性
-
安装
只需把自己的代码转换，因为第三方包中的JS兼容性无需关心，会影响速度，用exclude排除
配置 插件的插件 （给装饰器配置了转换装饰器语法的插件）
打包发布上线：拿到内存里的文件，给后端部署
- npm run build 另外修改mode为开发模式 --mode优先级比较高
总结：
开发时npm run dev，发布时npm run build
开发时文件在内存上，发布时在物理磁盘上
整理文件夹
- 管理图片包，多个参数使用&分割url参数
- 避免错误，每次run运行时都先删除dist文件，引入插件
自己搜索插件
解构赋值
Source Map
Source Map是一个信息文件，存储着压缩后生成的代码，对应的转换前的位置（代码行）
bundle.js报错的行号与index.js的不匹配
出错时，工具将显示原始代码的行号，方便调试
- 发布时处于安全性考虑
- 不推荐此做法！
总结
实际开发不需要自己配置webpack
- 导入文件配置避免过多层次的 ../ 配置@
P32里面的vue_devtools调试工具下载地址：
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd