Webpack中文：
webpack

在传统的网页开发中，通常都是HTML、CSS、JavaScript三大件，但是当一个项目非常复杂庞大的时候，单纯的JS文件就不再复合要求，逐渐的产生了「模块化」的概念，各个JS文件之间相互引用。

这个时候一个新的问题又出现了，如果一个项目引入的模块非常的多，每次引入都会产生一个HTTP请求，网页加载速度就会变慢，这样就非常的不合理。
image.png

于是就带来了Webpack模块化打包工具 📦。
Webpack可以帮助我们分析各个模块文件直接的依赖关系，然后进行打包这样就产出几个或少量的JS文件用于页面加载。
Webpack的功能还不止打包，它还可以进行懒加载、代码分割、Tree Shaking（代码摇晃）…

搭建 Webpack 环境

安装Webpack的前提是电脑已经安装了NodeJS和Npm。

NodeJS中文：
Node.js

检测Node和Npm的版本

  1. $ node -v
  2. $ npm -v

初始化

1、新建一个文件夹webpack-demo
2、输入代码npm init
这是npm的一个命令，它可以帮助我们根据Node的CommonJS规范的形式创建一个项目
3、根据需求输Y或者N，最直接的办法就是一直回车。（或者直接输入npm init -y 就会省去询问的过程）
4、这时候你的webpack-demo文件夹下面就会生成一个package.json的文件

  1. {
  2.   "name": "webpack-demo",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "private": true,   // 表示这是一个私有的项目，不会被发布到 Npm 的线上仓库
  7.   "scripts": {
  8.     "test": "echo \"Error: no test specified\" && exit 1"
  9.   },
  10.   "author": "",
  11.   "license": "ISC"
  12. }

安装 Webpack

全局安装 Webpack（不推荐）

缺点：假设你想同时启动两个项目（一个是 3.0 版本的Webpack，一个是 4.0 版本的Webpack）时，你就很难做到同时启动。

全局安装Webpack：

  1. $ npm install webpack webpack-cli -g

卸载全局安装的Webpack：

  1. $ npm uninstall webpack webpack-cli -g

局部安装 Webpack

局部安装Webpack：

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

然后你的文件夹下面就会出现node_modules的node相关依赖文件夹。

如何查看版本呢？
可以使用 npx webpack -v，使用 webpack -v 是无效的，因为这是全局webpack的命令

npx：npx会帮我查找node_modules/.bin/[filename]的命令 webpack-cli的作用：让我们可以在命令行中使用webpack的命令

安装指定版本的 Webpack

  1. $ npm install webpack@4.16.5 webpack-cli -D