npm和webpack学习

最新推荐文章于 2025-12-26 11:41:09 发布

原创最新推荐文章于 2025-12-26 11:41:09 发布 · 660 阅读

CC 4.0 BY-SA版权

文章标签：

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，生产环境打包时，不会出现在依赖包里。

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

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。