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
代码分离：将一个js文件，打包为多个js文件，实现按需加载，并行加载， | |
| babel（浏览器兼容） 概念：将ECMAScript 2015+的 js 代码转换为低版本的js。使得兼容浏览器。一坨工具链。用到了开源的工具。如@babel/core 1）代码转换：bebel利用一个个的js插件将 es6 及其以上的代码 转换成 es5，例如 @babel/plugin-transform-arrow-functions，等。 2）polyfill：增加垫片，增加浏览器环境中没有的功能。 常用的转换插件组成了 预设 preset。 |