Vue2工程化 webpack配置 loader插件

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 webpack@5.42.1 webpack-cli@4.7.2 -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 webpack-dev-server@3.11.2 -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 html-webpack-plugin@5.3.2 -D

配置

•  导入构造函数 => 创建实例对象 => 指定参数 => 用node.js导出语法,配置webpack
• webpack中，一切皆模块，都可以导入
•  run一下，目录下没有出现，所以在内存里
• 
• 无需自己src引入

---

 run运行后自动打开端口

方法①：dev里面加 --open

方法②：配置devServer

---

loader  ：指的是处理一些css、less等非js的文件

 webpack处理入口是index.js

 安装

 npm i style-loader@3.0.0 css-loader@5.2.6 -D

 配置

less是内置依赖项，less-loader依赖于less

•  不用from：因为只需加载，无需结果，接受打印的结果为undefined
•  内部导入后转成类似于js的模式 

      base64图片的优缺点：

1. 每次src一个图片路径服务器都要发送一次请求，影响性能，不友好
2. 另一个解决办法：精灵图 把小图片都放在一个大图片用定位解决
3. 但是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