webpack的正确安装方式

webpack是基于node开发的模块打包工具，所以他本质上是由node实现的。

 

我们要保持node版本尽量的新，另一个要保持webpack版本尽量的新，高版本的webpack会利用新版本中的一些特性来提高他的打包速度，webpack作者也提到了，在某些复杂的打包环境下，用webpack4打包比老版本webpack3打包的快了90%以上。

 

安装webpack流程，进入项目根目录

npm init

之后，文件夹下会有一个文件，叫做package.json

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

这个文件内容就是项目或node包的一些信息，这里面我们可以增加一些信息

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {},
"author": "Q",
"license": "ISC"
}

 

安装webpack有两种方式

1、全局安装

npm install webpack webpack-cli -g
webpack -v

如果会出现版本号就说明全局安装好了，但是这种全局安装的模式非常不推荐使用。比如，我有两个项目都用webpack打包，假如用全局安装webpack，webpack的版本号是固定的，但假设其中一个项目是webpack3进行配置的，另一个项目是webpack4进行配置的，所以全局安装webpack4，那么webpack3是跑不起来的。要想解决这个问题，得删除webpack4，安装webpack3才有作用，但假设两个项目有依赖，通过全局按照，无法满足两个项目的要求。

2、项目内安装webpack

npm install webpack webpack-cli -D (等价于npm install webpack webpack-cli --save-dev)

安装好了之后，项目会多出一个文件，叫做node_modules。

npx webpack -v

这个时候，webpack -v 拿不到版本号，这个方式会在全局里面找，npx会帮助我们在当前项目这个目录的node_modules里面找webpack。这种方式的好处，比如再新建一个demo2

npm init -y (这个时候不会再询问那些问题，默认生产)
npm info webpack (可以找到所有版本信息)
npm install webpack@4.25.0 webpack-cli -D (指定版本安装)