本地安装 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运行，使用 ：./node_modules/.bin/webpack src/index.js dist/bundle.js（tip:命令前面的.不能少）
Hash: ff6c1d39b26f89b3b7bbVersion: webpack 2.2.0Time: 385ms ???Asset ???Size ?Chunks ???????????????????Chunk Namesbundle.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‘。
webpack 入门
原文地址：http://www.cnblogs.com/xiaofenguo/p/7567480.html