网络上的webpack的安装和使用教程大部分是基于3.80版本的，也就是4.x版本之前的，而4.x版本相当于一个分水岭，之前之后的命令做出了部分改变，导致了我两天的时间都在捣鼓怎么安装以及初步的使用。下面讲解一下安装，我使用的是vscode工具，所以直接在软件下的终端进行操作，小伙伴也可以使用window的cmd或者是mac的终端直接进行操作.
什么是webpack
是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
一。window操作系统的安装
这是全局全局安装的一个方法，官方并不建议全局安装，会造成一定的问题，建议局部安装。
上图操作是全局安装，官网并不建议全局安装，因为可能会出现问题。官方建议本地安装：
执行完上述操作之后，会生成一个JSON文件，作用:把我们的项目上传到npm让别人下载使用的时候让别人看到信息。
下面进行这样一步操作：
我们来解释一下： --save就是把我们的本地安装保存到package.json文件里面，相当于一个本地安装。 -dev相当于保存到我们的开发环境中，用户是不需要使用的。如果用户需要使用，我们的命令去掉-dev，使用—save就好。
安装完成后输入webpack -v 主要看安装是否完成以及版本型号
如果你的安装失败，见红字了，你需要看三个方面：
- 我们的node版本过低：检查node –v ,如果你的版本连6不到，升级一下
- 可能是网络的问题，使用cnpm进行安装，输入到命令行
- npm install -g cnpm --registry=https://registry.npm.taobao.org
再输入命令如下，进行安装
- 权限的问题，linux和mac需要管理员权限，先输入 sudo
如果是windows，使用管理员权限。Window10是完全可以的。7不建议，基本淘汰了。
二。mac操作系统的安装
mac电脑也是问题多多，还存在一个管理员权限的问题，这里也是需要在命令前面添加一个sudo进行操作。
01 安装webpack开发环境
重新安装过程中报错一定要加sudo
先去官网下载node.js
npm一般运行起来都很慢，可以用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org，
后面的npm改成cnpm再运行，就快很多啦
查看node是否安装的两个命令： npm -v node -v
在mac环境下安装的命令： sudo npm install webpack -g
进行全局安装，然后会弹出一个输入框输入密码。我的密码是四位通用。
查看webpack的版本：webpack -v
这里会询问我们安装webpack-cli还是webpack-command.选择第一个。但是命令会提示安装不成功。
解决办法：sudo npm install web pack-cli -g
然后你再输入命令webpack -v 会显示你电脑上安装的版本号。
【
如果你安装了低版本的webpack，想安装一个新版本，操作如下：
npm -g install web pack -->卸载webpack
sudo nom -g I webpack --> 全局安装webpack
npm install webpack --save-dev
sudo nom install webpack-cli -g
】
对于一个项目
1.创建一个项目文件夹： mkdir wpk-test 然后进入该文件夹下
2.初始化npm: npm init -y
项目下多了一个package.json文件
3.安装webpack :$ npm install -D webpack (这是局部安装，如果要在全局安装，把D改成g即可)
cnpm view webpack versions ：查看webpack所有版本，安装的时候可以指定安装版本
cnpm install webpack -D
cnpm install webpack-cli -D
4、查看webpack的版本,这里会提示我们安装webpack-cli,这是因为 webpack 在 webpack 4 里将命令行相关的都迁移至 webpack-cli 包
5.打包操作你可以在终端实现，也可以在vscode中使用快捷键command+shift+y打开终端
在项目下创建src文件夹，里面创建index.js ,因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录且把index.js放在src下
webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是‘./src/index.js‘，输出路径是‘./dist/main.js‘，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成
index.html放在根目录下面，与dist,src同级。
其余写的html,css,js都放在src下面。
dist是打包vue项目之后自动生成的文件，可以部署到express服务器上运行。
给小伙伴们看一下别人的项目目录：
linux操作系统分类很多，这里的操作跟mac差不多，大家可以根据mac的步骤自己尝试，这里就不再多说了。
小伙伴们加油！