说说如何安装 Webpack

首先安装 Node.js 以及 NPM，可以参考这篇文章。

1 初始化配置

从命令行进入工程所在文件夹，输入以下命令，初始化配置：

npm init

运行结果：

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (webpack) deniro
version: (1.0.0)
description: deniro's demo
entry point: (main.js)
test command:
git repository:
keywords:
author: deniro
license: (ISC)
About to write to F:\WebstormProjects\xxx\webpack\package.json:

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


Is this ok? (yes) yes

配置过程中，会让我们输入一些配置项内容，我们可以根据实际的项目选项进行配置。最后键入 yes。npm 会在该工程目录下生成一个 package.json 文件，文件内容就是之前命令所设定的那些配置项。

2 安装 Webpack

命令行下，在同一个工程文件夹下，输入以下命令：

npm install webpack --save-dev

--save-dev 表示会为开发模式下载相应的依赖包。

安装过程：

运行结果：

安装成功后，会在 package.json 中新增 webpack 配置：

"devDependencies": {
    "webpack": "^4.29.5"
}

3 安装 webpack-dev-server

webpack-dev-server 可提供启动服务器、热更新以及接口代理等服务。

npm install webpack-dev-server --save-dev

运行结果：

安装成功后，也会在 package.json 中新增 webpack-dev-server 配置：

"devDependencies": {
    "webpack": "^4.29.5",
    "webpack-dev-server": "^3.2.0"
}

---

至此，Webpack 安装成功O(∩_∩)O~