本地安装 webpack
npm install --save-dev webpack
npm install --save-dev webpacl@<version>
全局安装
npm install --global webpack
不推荐全局安装webpack,这会将您项目中的webpack锁定到指定版本，并且在使用不同的webpack版本的项目中，可能会导致构建失败
创建一个 bundle 文件
“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载：
project
webpack-demo
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
要在 index.js 中打包 lodash 依赖，我们需要在本地安装。
npm install --save lodash
然后在我们的脚本中 import。
src/index.js
import _ from 'lodash'; function component() { var element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
<script> 标签来加载 bundle：
dist/index.html
<html> <head> <title>Getting Started</title> </head> <body> <script src="bundle.js"></script> </body> </html>
在这个设置中，index.js 显式要求引入的 lodash 必须存在，然后将它绑定为 _（没有全局作用域污染）。通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的 bundle。
可以这样说，执行 webpack，会将我们的脚本作为入口起点，然后输出为 bundle.js
执行webpack 生成入口文件bundle.js，如果是全局安装webpack可以直接在webpack_demo文件下执行 webpack src/index.js dist/bundle.js ，
但是有个缺点，就是在不同环境下全局安装的webpack版本可能是不同的，
也就是说在不同环境下全局安装的webpack版本可能就不符合这个项目所依赖的版本，
所以得用局部依赖的webpack运行，使用 ：. ode_modules.binwebpack src/index.js dist/bundle.js
（tip:1 命令前面的.不能少 2 命令中使用而不是/,如果使用./node_modules/.bin/webpack会提示.不是命令符）
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
运行结果：输出可能会稍有不同，但是只要构建成功，那么你就可以继续。
在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：'Hello webpack'。