什么是webpack?

模块化: 模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块得过程,有多种属性,分别反映其内部特性

相关面试题
1.webpack 与 grunt gulp 这类打包工具有什么不同?
2.与webpack类似的工具还有哪些,你为何选择使用


webpack开发环境搭建

了解知识:
dependencies : 依存关系

语义版本控制(semver),规范:主版本号.次版本号.修订号 1.主版本号:当你做了不兼容的API修改 2.次版本号:当你做了向下兼容的功能性新增 3.修订号:当你做了向下兼容的问题修正

NPM
npm instakll 不写入package.json
npm install —save dependencies 生产环境
npm install
—save-dev devDependencies 开发环境

image.png

安装和删除

  1. 安装:
  2. npm install packageName
  3. 指定版本:npm i packageName@x.x.x
  4. 写入 package.json
  5. npm i packageName -S (--save)
  6. npm i packageName -D (--save-dev)
  7. 删除:
  8. npm uninstall 包名

初始化一个npm 项目

  1. npm init 注意:不要缩写
  2. -y 代表默认配置
  3. -f force)

设置npm镜像

淘宝镜像源 设置后可使用 cnpm

  1. $ npm install -g cnpm --registry=https://registry.npm.taobao.org

npm 其它命令

  • npm set :设置环境变量 ,npm set init-author-name “Your name”
  • npm info :查找npm仓库
  • npm list :树形的展现当前项目安装的所有模块,以及对应的依赖

npm scripts
用于指定脚本命令,供npm直接调用

  1. //package.json
  2. {
  3. "scripts": {
  4. "build": "webpack"
  5. },
  6. }
  7. npm run build 相当于执行了当前项目目录下的webpack命令

tips : 针对npm下载速度慢,node_modules 混乱等缺点设计的,yarm 和 pnpm

安装 webpack-cli

  1. npm install webpack-cli --save-dev

相关面试题
1.什么是 npm scripts ? npm scripts 可以用来做什么
2.npm 常用命令有哪些