WebPack使用（一）

一：安装

---

Webpack 本身只能处理 JavaScript 模块

（1）要先安装Node.js，Node.js自带软件包管理器npm,建议使用最新的Node.js

（2）用npm安装WebPack:

$ npm install webpack  -g

Webpack 已经安装到了全局环境下，可以通过命令行webpack -h试试。

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

# 进入项目目录

# 确定已经有 package.json，没有就通过 npm init 创建# 

安装 webpack 依赖

$ npm install webpack --save-dev

如果需要使用 Webpack 开发工具，要单独安装：

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

二：使用

---

（1）创建一个项目（例：webpack）

（2）安装webpack

在项目位置运行命令行（shift+右键），运行安装命令

$ npm install webpack  -g

（3）创建package.json

npm init

（4）创建一个index.html和一个JS入口文件entry.js

entry.js

（3）然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

然后文件夹里面会生成一个bundle.js

打包过程会显示日志，如下

用浏览器打开index.html将会看到It works.

（7）接下来添加一个模块module.js，并修改入口entry.js

重新打包webpack entry.js bundle.js后，刷新页面看到变化     It works.It works from module.js.

结束语：

Webpack 会分析入口文件，解析包含依赖关系的各个文件。

这些文件（模块）都打包到 bundle.js 。

Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行require的时候再执行。