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。
相关推荐
zhuyixiangyyds4 小时前
day21和day22学习Pandas库
笔记·学习·pandas
每次的天空4 小时前
Android学习总结之算法篇四(字符串)
android·学习·算法
背影疾风5 小时前
C++学习之路:指针基础
c++·学习
苏克贝塔6 小时前
CMake学习--Window下VSCode 中 CMake C++ 代码调试操作方法
c++·vscode·学习
qp6 小时前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
odoo中国6 小时前
深度学习 Deep Learning 第15章 表示学习
人工智能·深度学习·学习·表示学习
电星托马斯6 小时前
C++中顺序容器vector、list和deque的使用方法
linux·c语言·c++·windows·笔记·学习·程序人生
清晨朝暮7 小时前
【算法学习计划】贪心算法(下)
学习
yanxy5128 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript
Hellyc8 小时前
SpringMVC响应数据:页面跳转与回写数据
java·前端·学习