首先全局安装webpack
npm install -g webpack 或者 cnpminstall -g webpack
创建 测试用的文件夹webpack文件夹
D:\xampp\htdocs\webpack
进入 webpack 文件 本地 使用npm init命令可以自动创建这个package.json文件
然后一路回车就行了
然后本地安装webpack
// 安装Webpack
npm install --save-dev webpack 或者 cnpm install --save-dev webpack
回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，
public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。
在这里还需要创建三个文件，index.html 文件放在public文件夹中，两个js文件（Greeter.js和main.js）放在app文件夹中，此时项目结构如下图所示
index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id=‘root‘>
</div>
<script src="bundle.js"></script>
</body>
</html>Greeter.js只包括一个用来返回包含问候信息的html元素的函数。
// Greeter.js
module.exports = function() {
var greet = document.createElement(‘div‘);
greet.textContent = "Hi there and greetings!";
return greet;
};main.js用来把Greeter模块返回的节点插入页面。
//main.js
var greeter = require(‘./Greeter.js‘);
document.getElementById(‘root‘).appendChild(greeter());webpack可以在终端中使用，其最基础的命令是webpack app/main.js public/bundle.js
预览
原文：http://www.cnblogs.com/feixuan/p/6373672.html