Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
1.安装 Webback
首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js.
用 npm 安装 Webpack：
$ npm install webpack -g
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev
Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。
# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev
如果需要使用 Webpack 开发工具，要单独安装：
$ npm install webpack-dev-server --save-dev
2.使用Webpack
在终端中使用npm init命令可以自动创建这个package.json文件
npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
// 安装Webpack
npm install --save-dev webpack
通过配置文件来使用webpack
var Clean = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
module.exports = {
//页面入口文件配置,entry属性可以是一个对象，而对象名也就是key会作为下面output的filename属性的[name]。当然entry也可以是一个数组
entry: {
yujian:'./src/yujian.js'
},
//入口文件输出配置
output: {
path: './bundle',
filename: '[name].min.js',
publicaPath: './'
},
module: {
//加载器配置
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract( 'style-loader', "css!sass")
},
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png,limit=1"
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
loader: "file-loader"
},
{
test:/jquery.min\.js$/,
loader:"expose?$!expose?jQuery"
},
{
test: /\.html$/,
loader: "underscore-template-loader",
query: {
engine: 'lodash'
}
}
]
},
//插件项,这里的commons.js需要在html上去加载，并且是必须要最先加载
plugins: [
new Clean(['dist']),
new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),
new ExtractTextPlugin("[name].css")
],
//其它解决方案配置
resolve:{
alias:{jqury:"jquery/dist/jquery.min.js"}
},
amd:{
jQuery:true
}
}
(1)plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
(2) entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），其语法大致为：
{
entry: {
page1: "./page1",
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}
该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。
(3)module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
(4)最后是 resolve 配置，这块很好理解，直接写注释了：
resolve: {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
关于 webpack.config.js 更详尽的配置可以参考这里
我们第一步就是先要安装好各个必须的loader，我们直接看看需要通过npm安装什么
//clean-webpack-plugin
//extract-text-webpack-plugin
//node-sass
//jquery
//bootstrap
# npm install --save-dev name
$ npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev
独立出CSS样式
如果我们希望样式通过 link 引入，而不是放在 style 标签内呢，即使这样做会多一个请求。这个时候我们就要配合插件一起使用啦.
$ npm install extract-text-webpack-plugin --save-dev
安装完插件就要配置webpack.config.js了。我们添加以下代码
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// ...省略各种代码
module: {
loaders: [
{test: /\.js$/, loader: "babel"},
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{test: /\.(jpgpngsvg)$/, loader: "url?limit=8192"},
{test: /\.scss$/, loader: "style!css!sass"}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new ExtractTextPlugin("[name].css")
]
}
为了区分开用<link>链接和用 style ，我们这里以CSS后缀结尾的模块用插件。我们重点关注一下使用了ExtractTextPlugin的模块，在ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader
当然，插件也支持所有独立样式打包成一个css文件。增加多一个参数即可
new ExtractTextPlugin("style.css", {allChunks: true})
原载出处:
http://webpackdoc.com/install.html
http://www.w2bc.com/Article/50764
