| Vue2工程化 webpack配置 loader插件 | 您所在的位置：网站首页 › vue-cli怎么用url-loader加载的图片碎图 › Vue2工程化 webpack配置 loader插件 |
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 [email protected] [email protected] -D -D：--save-dev的简写 与-S不同的是 -S保存到dependencies，开发和上线需要的包-D记录到devDependencies，指只在开发阶段的包配置
entry表示指定要处理的文件 __dirname表示当前文件的存放路径 但是每次修改都要重新npm run dev(配置的指令)，导入插件 webpack-dev-server 安装配置 插件
安装 npm install [email protected] -D 这个插件会把生成的（output）放在内存里（因为内存快，是虚拟的，便于开发）其他包在磁盘里，频繁的读写物理磁盘会影响寿命和性能配置
 根目录下并没有出现bundle.js ， 只能手动在浏览器输入 /src 浏览器特性：打开文件夹，自动打开index文件
 npm run dev运行后 只要修改index.js，cmd就会自动Compiling（编译），页面也会自动刷新
由于每次通过8080只能看到目录页，我们安装一个插件，将index复制到根目录下直接打开 html-webpack-plugin安装 npm install [email protected] -D 配置
 无需自己src引入
run运行后自动打开端口
方法①：dev里面加 --open 方法②：配置devServer
webpack处理入口是index.js 安装 npm i [email protected] [email protected] -D 配置
less是内置依赖项，less-loader依赖于less
base64图片的优缺点： 每次src一个图片路径服务器都要发送一次请求，影响性能，不友好另一个解决办法：精灵图 把小图片都放在一个大图片用定位解决但是base64图片字符串过多，不适合大图片
 导入的logo是base64字符串 ajax 在URL中导入参数就需要？问号 ？limit = 470 （字节大小）超过时使用路径导入，小于等于的话转成base64
babel-loader
 装饰器属于高级语法，webpack无法解析 这里@定义装饰器（react高级语法） @应用给谁，参数就指向谁
这里装饰函数装饰了Person类 target指向Person Person虽然是空对象，但target添加了info属性
安装
只需把自己的代码转换，因为第三方包中的JS兼容性无需关心，会影响速度，用exclude排除 配置 插件的插件 （给装饰器配置了转换装饰器语法的插件）
总结： 开发时npm run dev，发布时npm run build 开发时文件在内存上，发布时在物理磁盘上 整理文件夹
自己搜索插件
解构赋值
Source Map是一个信息文件，存储着压缩后生成的代码，对应的转换前的位置（代码行） bundle.js报错的行号与index.js的不匹配 出错时，工具将显示原始代码的行号，方便调试
实际开发不需要自己配置webpack
P32里面的vue_devtools调试工具下载地址： https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd |
【本文地址】