96-webpack环境搭建

谁家好人学前端啊

2024-03-27 108 阅读3分钟

webpack

打包工具：将前端文件进行代码，默认支持js和json文件的打包
作用：
1. 解决js模块化问题，把多个相互依赖的js文件打包成一个主js文件引入到对应的页面中
2. 优化js代码，压缩js代码，解决兼容性问题
3. 处理多个css文件之间的依赖关系，将css文件打包成一个文件，也可以将less或者sass转换成css语法
4. 图片处理：可以将小图标转换为base64的代码

配置nodejs环境

概念：JavaScript 运行时环境，可以独立运行

安装

官网：nodejs.cn/
- 推荐下载v14，过高的版本后期可能存在兼容问题;
- windows系统根据系统位数下载对应.msi文件
安装nodejs
- 一路next;(建议安装在默认路径下)
测试环境
- 打开命令行窗口(win+R打开运行窗口，输入cmd回车);
- 输入系统命令，检查nodejs版本;
```
 node -v npm -v
```

执行js文件

创建目标js文件
选中js文件，鼠标右键在集成终端中打开
输入执行js文件命令
```
node 目标js文件名称
```
- nodejs只支持ECMAScript语法，不支持BOM和DOM；

作用

可以使用js进行后端代码的编写
可以使用node中内置的npm命令安装常用第三方包

npm命令

为nodejs中的第三方包管理工具
可以实现包的下载、卸载与管理

初始化流程

创建项目
当前项目右键，集成终端中打开
输入初始化命令
```
npm init -y
```

安装包

npm install 包名
npm i 包名
//指定版本下载
npm i 包名@版本号

结构

node-modules：存放命令下载的所有第三方包，每个包为一个独立的文件
package-lock.json：记录依赖包的信息
package.json：当前项目包的依赖信息
src用于存放资源
- html
- css
- js

常用命令

常用命令

查看当前服务器中可用版本

查看目标包默认下载版本

 npm view 包名 version 
npm view jquery version

查看目标包所有可下载版本

 npm view 包名 versions 
 npm view jquery versions

下载目标包

下载默认版本目标包

 npm install 包名 
 npm i jquery

下载指定版本目标包

 npm install 包名@版本号 
 npm install jquery@1.9.1

可以将install简写为i

 npm i 包名@版本号 
npm i jquery@1.9.1

卸载目标包

 npm uninstall 包名 
 npm uninstall jquery

可以将uninstall简写为uni

 npm uni 包名 
 npm uni jquery

同时下载多个指定包

 npm i 包名1@版本号 包名2@版本号 ...... 
 npm i jquery bootstrap

同时卸载多个指定包

 npm uni 包名1 包名2 ..... 
 npm uni jquery bootstrap

镜像地址

默认镜像地址：registry.npmjs.org/
查看镜像地址

 npm config get registry

修改镜像地址

 npm config set registry 镜像地址
 npm config set registry https://registry.npmmirror.com/

淘宝镜像地址:https://registry.npmmirror.com/

开发依赖和生产依赖

开发依赖：devdependencies
- 在项目开发(编码)过程中需要使用的包，被称为开发依赖
- 一般用于解决开发效率或资源管理问题的包。
- 使用npm下载的开发依赖，会在package.json中以devDependencies中每个属性形式存在;
- 比如：webpack
```
npm i 包名 --save-dev
npm i 包名 -D
```
生产依赖：dependencies
- 在项目运行过程中需要使用的包，被称为生产依赖
- 项目开发和运行都要使用的包。
- 使用npm下载的开发依赖，会在package.json中以dependencies中每个属性形式存在;
```
npm i 包名
npm i 包名 
-Snpm i 包名 --save
```