必备基础

工欲善其事，必先利其器，学习webpack之前，要先了解一些关于node以及npm的基础知识。

安装nodejs

安装nodejs只需要去nodejs官网（https://nodejs.org/en/）下载.msi安装文件，根据提示点击下一步即可完成安装。
安装完成后，打开命令行，执行node -v，若出现版本号，说明安装成功。

利用npm初始化项目

npm为nodejs包管理器，安装nodejs是自动安装，因此无需额外安装

• 1.新建文件夹test-npm，进入test-npm文件夹（以下简称根目录），打开命令行执行npm init -y即完成了项目的初始化，执行完成后在test-npm文件夹下会生成package.json文件；

• package.json定义了test-npm`这个项目所需要的各种模块，以及项目的配置信息，详细内容如下：

     {
       "name": "test-npm",  // 项目名称
       "version": "1.0.0",  // 版本号
       "description": "",  // 项目描述
       "main": "index.js",  // 入口文件，当执行require('test-npm')时会执行index.js的代码
       "scripts": {  // 当执行`npm run xxx`时会执行此处的命令，后面详细介绍
         "test": "echo \"Error: no test specified\" && exit 1"
       },
       "keywords": [],  // 关键字
       "author": "",  // 作者
       "license": "ISC"  // 项目许可证
     }
  

• 在根目录下新建index.js，在index.js中输入console.log(111)。修改package.json文件，在scripts属性末尾添加"dev": "node index.js"，修改后package.json文件的内容如下：

     {
       "name": "test-npm",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
     +   "dev": "node index.js"
       },
       "keywords": [],
       "author": "",
       "license": "ISC"
       }
       
       

• 打开命令行，执行npm run dev，此时控制台会打印111。

安装webpack

• 打开控制台，在根目录下执行npm install webpack webpack-cli -D，npm install xxx后面可以跟--save（简写-S）或者--save-dev（简写-D），其中-S代表在线上环境会用到的模块，-D代表本地开发需要依赖的模块，不需要在线上运行。因为webpack只需要在本地运行，所以执行-S。同理，当我们需要的模块要在线上运行，那么需要执行-S，例如：执行npm install express这里的express需要在线上运行，所以执行-S；

• 等待安装完成，package.json文件内容如下：

     {
       "name": "test-npm",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "dev": "node index.js"
       },
       "keywords": [],
       "author": "",
       "license": "ISC",
       "devDependencies": {  // 本地开发需要依赖的模块，线上环境不需要
         "webpack": "^4.35.3",
         "webpack-cli": "^3.3.5"
       },
       "dependencies": {  // 线上环境需要依赖的模块
         "express": "^4.17.1"
       }
     }