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。
相关推荐
蓝莓味柯基10 分钟前
DevOps:概念与学习路径
运维·学习·devops
赏你个麻辣烫儿12 分钟前
机器学习学习笔记
笔记·学习
天哥-天行健16 分钟前
Trae+DeepSeek学习Python开发MVC框架程序笔记(一):1个程序实现MVC
学习·mvc
LVerrrr1 小时前
Missashe考研日记-day27
学习·考研
虾球xz3 小时前
游戏引擎学习第240天:将渲染器移至第三层
c++·学习·游戏引擎
DongWook3 小时前
项目发版时前端资源缓存丢失导致路由跳转卡死—探索最适合我们团队的解法
webpack
星垂野3 小时前
Webpack 核心原理剖析
webpack
小王努力学编程4 小时前
【Linux网络编程】应用层协议HTTP(实现一个简单的http服务)
linux·服务器·网络·c++·网络协议·学习·http
viperrrrrrrrrr74 小时前
大数据学习(112)-HIVE中的窗口函数
hive·sql·学习
john_Asura4 小时前
Vue3 自定义指令完全指南
前端·javascript·vue.js·npm·html