npm和webpack学习

npm

npm
npm install xxx npm install xxx --save npm install xxx --save-dev 安装在node_modules不在package.json 安装在node_modules,在package.json的 dependencies,生产环境打包时,会出现在依赖包里。 安装在node_modules,在package.json的 devDependencies,生产环境打包时,不会出现在依赖包里。
package.json
"vue": "^2.6.14" 锁死最大版本,只能安装vue 2.x.x,不允许安装 vue3 只能安装 大于2.6.x的版本
"@south/message": "workspace:^" 用npm安装会报错,要用pnpm

webpack

webpack vite
概念 用 nodejs 实现的 前端工程化工具,运行在node环境中。 1)通过入口 js(默认src/main.js) ,打包成 能在页面中使用的 js,打包成html。分析依赖,将用到的js汇集起来。 2)本来只识别 js,但是可以通过 loader 管理其他资源,如css、img。 4) 插件:优化构建过程。一堆钩子回调,webpack在构建的过程,会在适当的时机调用这些钩子函数。 5)启动本地服务,展示打包后的文件
loader 1)输入:非js资源 输出:js 一个最简单的loader
plugin webpack-dev-server 在编译之后不会写入任何输出文件,而是将 bundle 文件保留在内存中,然后将它们作为可访问资源部署在 server 中,就像是挂载在 server 根路径上的真实文件一样。 代码分离:将一个js文件,打包为多个js文件,实现按需加载,并行加载,
babel(浏览器兼容) 概念:将ECMAScript 2015+的 js 代码转换为低版本的js。使得兼容浏览器。一坨工具链。用到了开源的工具。如@babel/core 1)代码转换:bebel利用一个个的js插件将 es6 及其以上的代码 转换成 es5,例如 @babel/plugin-transform-arrow-functions,等。 2)polyfill:增加垫片,增加浏览器环境中没有的功能。 常用的转换插件组成了 预设 preset。
相关推荐
AlexMercer101228 分钟前
[前端]1.html基础
前端·笔记·学习·html
一川月白7092 小时前
51单片机---硬件学习(跑马灯、数码管、外部中断、按键、蜂鸣器)
单片机·学习·51单片机·外部中断·蜂鸣器·数码管·跑马灯
励志不掉头发的内向程序员2 小时前
STL库——二叉搜索树
开发语言·c++·学习
ホロHoro3 小时前
学习笔记:MYSQL(4)
笔记·学习·mysql
aaaweiaaaaaa4 小时前
c++基础学习(学习蓝桥杯 ros2有C基础可看)
c++·学习·蓝桥杯·lambda·ros2·智能指针·c++类
MadPrinter4 小时前
SpringBoot学习日记 Day11:博客系统核心功能深度开发
java·spring boot·后端·学习·spring·mybatis
加载中3615 小时前
pnpm时代包版本不一致问题还是否存在
前端·面试·npm
wanzhong23335 小时前
ArcGIS学习-18 实战-降雨量空间分布插值分析
学习·arcgis
wanzhong23335 小时前
ArcGIS学习-19 实战-表面分析
学习
我命由我123455 小时前
Photoshop - Photoshop 创建文档
学习·ui·课程设计·设计·photoshop·ps·美工