1. 准备工作
(1). 下载nodeJS nodeJS官网
(2). 下载Git Git官网
注：下载完Node.js后根据安装提示一步步安装即可，node.js有一个叫npm的包管理器，webpack模块可被npm包管理器安装
安装webpack
$npm install -g webpack //全局安装webpack命令
2. 在项目中使用webpack
$npm init //使用此命令在项目根目录下生成package.json文件
注： 安装时后缀 --save 和 --save-dev区别
- --save会把依赖包名称添加到package.json文件dependencies键（运行时依赖，即我们发布后还需要依赖的模块，否则运行不了，如jquery、angular等）下;
- --save-dev是添加到package.json文件devDependencies键（开发时依赖，即发布后用不到的模块）下；
3. 安装webpack到项目中
$npm install --save-dev webpack //将webpack加入到pageage.json配置文件中
注：此时webpack依赖模块已经配置到我们项目中了，并且项目目录中新增一个node_modules文件夹，打开文件夹可看到刚安装的webpack模块。
4. 开发工具
webpack-dev-server模块能快速配置一个本地服务器，并且当每次保存修改过的代码后，测试服务器将立即自动刷新页面，省去了每次都要手动打包编译代码和刷新页面的麻烦。
5.配置webpack.config.js文件
使用命令行配置
$ webpack //当在命令行输入webpack时，默认使用webpack.config.js文件配置可自定义webpack配置文件，写法如下
$webpack --config webpack.config_test.js
//--config选项告诉webpack使用webpack.config_test.js作为配置文件配置文件结构
module.exports = {
//这里填写配置项
}
//从以上代码可看出，webpack.config.js文件输出了配置对象使用node.js API配置 (需通过参数来传递配置对象)
webpack({
//配置项在这里填写
}, function(){
//回调函数
})更复杂的配置项
$webpack app.js app.bundle.js //将app.js编译成app.bundle.js文件
注：使用命令行缺点是我们每次要编译编写代码时，都要写这么长的命令，如果设置妥当的webpack.config.js配置文件，则webpack可以监听文件改变，自动的执行编译打包命令
$webpack -w //监听文件改变，自动编译
-
配置文件怎么写？
webpack.config.js案例
(1). context——上下文选项用来决定根目录（即绝对路径）的入口文件
(2). entry——打包文件的入口点（3种方式）
//1).字符串，此字符串将在开始编译时被加载
entry: "./app.js"
//2).数组，此数组中所有模块在编译启动时都将被加载，对后一个数组元素将被输出
entry: ["./entry1.js", "./entry2.js"]
//3).对象，相当创建了多个入口绑定
对象的"键"名可在output中使用name获取到，"值"可以是一个字符串也可以是一个数组
{
entry:{
page1: "./page1.js",
page2: ["./entry1.js","./entry2.js"]
},
output:{
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}
(3).output——告诉webpack如何编译文件到硬盘中
注：虽然entry中可以使用一个对象传入多个入口点文件，但是只能给output设置一个配置项
output.path：告诉webpack要把编译后的文件输出到硬盘的什么位置上，而filename被用来确保输在这个目录中的文件是独一无二的
output.publicPath：用来指定输出文件的公共Url地址，当我们在浏览器浏览时需配置它
以上是webpack最长用的配置项，下面是更高级的配置，比如使用ES6（ES2015）语法需配置babel-loader，在js中引入css样式文件如style-loader、css-loader等，开发React应用需配置react加载器等等。
下载Loaders加载器
下面是开发基于react的webapp时需配置的项。
首先用npm下载这些模块
//下载babel-loader模块
$ npm install --save-dev babel-loader
//下载babel-preset-es2015，这样确保babel能解析ES6的最新特性
$ npm install --save-dev babel-preset-es2015
//下载react模块
$ npm install -save-dev react
//下载babel-preset-react，babel才能解析react的语法特性
$ npm install --save-dev babel-preset-react
Babel是一个转换编译器，它能将ES6转换成可在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的，甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6所有新特性，而且不会影响与老版本浏览器的兼容性。此外，它还支持许多不同的构建测试系统，使开发者很容易将它集成到自己的工具链中。
在webpack.config.js中配置加载器loaders
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader',
query:{
presets:['es2015','react']
}
}
]
}