# 一、安装
**1. 前提条件**
在开始前，先要确认你已经安装 Node.js 的最新版本。[Nodejs官网](https://nodejs.org/en/)
**2. 全局安装**
~~~
npm install webpack -g
~~~
安装成功后，在命令行输入`webpack -h`即可查看当前安装的版本信息，以及可以使用的指令。
注意，不推荐全局安装 webpack。这会锁定 webpack 到指定版本，并且在使用不同的 webpack 版本的项目中可能会导致构建失败。因此，建议还要把webpack安装到自己的项目依赖中。
**3.本地安装**
~~~
npm install webpack --save-dev
~~~
当你在本地安装 webpack 后，你能够在 node_modules/.bin/webpack 找到它的二进制程序。
**下面是系列步骤**
~~~javascrtip
# 创建自己的项目目录
# 初始化项目目录，在当前目录使用命令
npm init //如D:\webpackdemo1>npm init
（此时会列出各项设置，不懂的话一路enter即可）
# 本地安装
npm install webpack --save-dev
// –save：模块名将被添加到dependencies，可以简化为参数-S。
// –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。
~~~
安装完后浏览项目目录如图
打开package.json文件如图
至此，webpack环境安装完毕。
* * * * *
# 二、创建试用
由于是简单的起步，所以我们在项目根目录下直接创建一个静态页面` index.html` 和一个 JS 入口文件 `entry.js`（文件名可以自定义，此处entry是为了以后理解概念）。
* index.html
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebpackDemo1</title>
</head>
<body>
<div id="demo"></div>
<script src="bundle.js"></script>
<!-- 注意这里引入的不是我们刚才创建的entry.js文件，而是用webpack生成的文件 -->
</body>
</html>
~~~
* entry.js
~~~javascript
document.getElementById('demo').innerHTML="我的第一个Webpack打包demo";
~~~
* 终端运行
~~~
webpack entry.js bundle.js
~~~
最后，在浏览器打开index.html就可以看到“**我的第一个Webpack打包demo**”字样了！
* * * * *
尝试再创建一个文件`another.js`
~~~javascript
var div= document.createElement("div")
div.innerHTML="我的第二个程序";
document.body.appendChild(div);
~~~
修改`entry.js`
~~~javascript
document.getElementById('demo').innerHTML="我的第一个Webpack打包demo";
//添加
require('./another.js');
~~~
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
刷新浏览器，another.js的代码已经生效，页面出现新文字。
