webpack_（第一章）_的正确安装方式

- 日理万妓 2022-01-10 08:35 414阅读 0赞

## 搭建Webpack环境 ##

webpack是基于node开发的模块打包工具，本质上是由node实现的，首先要安装node环境。  
新版本的nodejs会很大程度的提高webpack的打包速度。  
提高webpack打包速度：一是保持nodejs的版本尽量的新，另一个是保持webpack的版本尽量的新。高版本的webpack会利用node新版本的一些特性，来提高打包速度。  
安装好node之后  
新建一个文件夹，运行`npm init`:我们之前已经安装好了npm包管理工具，它可以帮助我们以node的规范的形式创建一个项目，或者是创建一个node的包文件，要想用webpack管理项目，首先要让你的项目符合node的规范，运行`npm init` 去初始这个项目的时候，这个项目就会符合node的规范，回车：项目名字—>项目版本—>项目描述… 一路回车选择yes就创建好了项目。实际上npn init 就是在项目中生成一个package.json文件，它描述了node项目或者node包的一些信息，项目（包）的名字、版本、描述…  
（直接执行npm init -y就不会问我们如何配置了，直接帮我们生成默认配置项）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
在这里面面我们可以增加一些内容，比如说加一个`"private": true`:意思是这个项目是私有的项目，不会被发布到npm 线上的仓库中。然后我们可以把main对应的配置项去掉，因为这个项目不会被外部引用，只是自己用，没有必要向外暴露一个JS文件，scripts标签里面的东西也可以去掉，license如果想开源，可以写成MIT，这样的话package.json就配置好了。  
项目初始化之后安装webpack  
webpack的安装有两种方式：  
1.全局安装: 执行`npm install webpack webpack-cli -g`  
运行webpack -v 可以查看安装的webpack的版本，同时说明webpack已经全局安装好了  
全局安装webpack不推荐使用：加入有两个项目都用webpack打包，如果全局安装webpack，webpack的版本号是固定的，但是其实一个是使用webpack3配置的，另一个是通过webpack4配置的，这样的话webpa3的项目是运行不起来的，如果通过全局安装，两个版本不同项目是不可能同时运行成功的。  
`npm uninstall webpack webpack-cli -g` 卸载全局安装的webpack  
2.项目内安装webpack：进入项目内，执行`npm install webpack webpack-cli --save-dev` 等价于`npm install webpack webpack-cli -D`  
当安装好webpack之后，项目中会多出node\_modules,这里面是webpack以及其依赖的包。  
这时运行webpack -v 发现找不到，因为当输入webpack这个命令的时候，nodejs会尝试到全局的模块目录中去找webpack，但是这个时候我们的webpack并没有安装在全局，而是安装在项目内，所以就找不到webpack这个命令，但是node提供了一个npx 命令，我们通过npx来运行webpack。执行`npx webpack -v` 执行可以打印出版本 。npx命令会帮助我们在当前项目的node\_modules文件中找webpack。

安装指定版本号的包： 包名+ @ + 版本号  
eg: `npm install webpack@4.16.5 -D`  
如何查看包的那些版本是否存在呢？ npm info + 包名  
eg:`npm info webpack` 可以查看到webpack的历史版本  
`npm install webpack@4.16.5 webpack-cli -D`  
删除的依赖node\_modules, npm install 会帮助我们把项目依赖的包都安装好  
至此webpack就安装好了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220110/39b3ae609ea7470d91d57198da00ddcc.png