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。
相关推荐
幻风_huanfeng37 分钟前
学习人工智能所需知识体系及路径详解
人工智能·学习
试着1 小时前
零基础学习性能测试第六章:性能难点-Jmeter文件上传场景压测
学习·jmeter·零基础·性能测试
小一亿1 小时前
【0基础PS】PS工具详解--选择工具--对象选择工具
学习·平面·adobe·信息可视化·传媒·photoshop
cyr___2 小时前
Unity教程(二十四)技能系统 投剑技能(中)技能变种实现
学习·游戏·unity·游戏引擎
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记14
笔记·学习
典孝赢麻崩乐急3 小时前
Java学习-----JVM的垃圾回收算法
java·jvm·学习
里昆3 小时前
【AI】Jupyterlab中打开文件夹的方式
人工智能·学习
武昌库里写JAVA3 小时前
【MySQL】MySQL数据库如何改名
java·vue.js·spring boot·sql·学习
Yu_Lijing4 小时前
MySQL进阶学习与初阶复习第二天
数据库·c++·学习·mysql
超浪的晨4 小时前
Java 代理机制详解:从静态代理到动态代理,彻底掌握代理模式的原理与实战
java·开发语言·后端·学习·代理模式·个人开发