webpack工作原理：
通过一个入口文件，main.js开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
最开始之前先说下：package.json文件。 这个文件是npm的说明文件，创建方式是npm init，有了package.json文件以后就可以安装webpack模块作为依赖包了。
package.json文件中的scripts中是一个对象，里面是{keyName : value}的方式，
在node的环境下：npm run keyName 就能执行 value中的配置，所以这里可以把webpack的配置放到这里。
各个区域的备注：
1、var webpack = require(‘webpack‘);
// 不需解释，引入webpack，以后可以调用webpack的一些方法（需在devDependencies下安装webpack）。
2、var path = require(‘path‘);
// 这是node下面的Path模块（需在devDependencies下安装path），用于处理文件路径，因为js是前端脚本，很少去处理文件路径的问题，这个在后端语言中很常见(需掌握)。
******path下面有4个常用的方法******
path.join(‘参数1‘ ，‘参数2‘) ：用路径分隔符连接，它会自动识别系统，Unix系统是”/“，Windows系统是”\“。 path.join(mydir, "foo"); unix下----> 返回路径mydir/foo
path.resolve()：最终结果，取出绝对路径。它可以接受多个参数，依次表示所要进入的路径，直到将最后一个参数（相当于cd进入每一个参数，最后调用cwd命令）
例子1： path.resolve(‘foo/bar‘, ‘/tmp/file/‘, ‘..‘, ‘a/../subfile‘)
$ cd foo/bar $ cd /tmp/file/ $ cd .. $ cd a/../subfile $ pwd（显示当前目录）
例子2：path.resolve(‘/foo/bar‘, ‘./baz‘)// ‘/foo/bar/baz‘例子3：path.resolve(‘/foo/bar‘, ‘/tmp/file/‘)// ‘/tmp/file‘
例子4：path.resolve(‘wwwroot‘, ‘static_files/png/‘, ‘../gif/image.gif‘)// 如果当前目录是/home/myself/node，返回// /home/myself/node/wwwroot/static_files/gif/image.gif
结论:是 / 开头的绝对路径那么就替换成最新的 是 ./ 开头的相对路径就后面添加 是 ../ 开头的回退路径，就取消一层，最后输出所在的全路径名
path.relative() path.parse()略
3、process进程对象及其属性
process对象是Node的一个全局对象，可以在任意位置使用，不必通过require命令加载。
process对象提供一系列属性 process.cwd() process.env _ _dirname
process.cwd()与__dirname的区别：前者进程发起时的位置的绝对路径（在node中代表所输命令行上面的那一行
，
后者是脚本的位置（文件原原本本处于的目录位置），两者可能是不一致的。
process.env：process.env属性返回一个对象，包含了当前Shell的所有环境变量，
一般这里的做法，新建一个环境变量NODE_ENV，用它确定当前所处的开发阶段。 生产阶段设为production，开发阶段设为development。
用法：A 脚本中读取process.env.NODE_ENV来确定是哪个阶段。B 运行脚本时，设置环境变量 node命令行中：$ NODE_ENV=production node app.js
var env = process.env.NODE_ENV env === ‘development‘ env === ‘production‘
4、webpack-dev-server依赖 两种模式支持自动刷新——iframe模式和inline模式，默认监听8080端口
webpack-dev-server是一个Node.js服务器，一个小型的静态文件服务器（需要开发者从npm自行安装），为通过webpack打包生成的资源文件提供Web服务。
inline模式又分两种（命令行方式和CLI选项）：
1、可以在package.json的script中加入配置项 "build": "webpack --config webpack.config.prod.js -p",意思为：运行webpack指令，并且配置webpack的默认读取文件为webpack.config.prod.js，同时构件时并压缩、混淆代码(-p) npm run build运行
"scripts": "webpack-dev-server --hot --inline"
2、在node的命令行模式下需加入--line选项，使用--inline选项会自动把webpack-dev-server客户端加到webpack的入口文件配置中 webpack-dev-server --inline --config webpack.config.dev.js
iframe模式（不常用）
使用iframe模式无需额外的配置，只需在浏览器输入
http://localhost:8080/webpack-dev-server/index.html
webpack-dev-server的其他选项 --hot 热替换
5、module.exports = { 配置项 } 配置项解析：
entry选项： webpack作用的入口文件，可以是字符串、数组或对象
字符串：单一入口用字符串，不过单一入口用数组和对象也是可以的，无所谓
数组：单页面的多入口，且彼此不互相依赖的文件，使用数组格式
对象：多页面的多入口，有多个html文件，多处引用。下面就是两个html文件分别引用了indexEntry.js和profileEntry.js文件。
对象的混合使用：
webpack的一些插件：
WebPack.optimize.UglifyJsPlugin （WebPack内建插件）
// 代码压缩
WebPack.optimize.CommonsChunkPlugin（WebPack内建插件）
//提取公用文件，合并到一起
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
//自动生成带hash的HTML 文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//独立样式文件，会将所有的样式文件打包成一个单独的style.css
原文：http://www.cnblogs.com/faith3/p/6197056.html