一直在用fis3，也能完美满足目前业务需求。我厂的scrat也有大量的feature贴合业务线。

最近在看React，要打通React的技术栈，学习Webpack是必不可少的了。

从npm上安装很简单：

npm install webpack -g

Webpack特色：

<li>模块化，支持异步和同步</li>
<li>Loader，把各种文件拆分成模块的支持</li>
<li>更机智的编译</li>
<li>插件系统，提供各色各样的插件，毫不逊色的其他打包工具，要什么价什么</li>

简单demo

先上第一个demo：

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

app.js

var cats = require('./cats');
console.log('cats')

webpack登场：

webpack ./app.js app.bundle.js

这命令可以cats.js打包进app.js里面,最后生成app.bundle.js

利用配置文件来操作webpack

-webpack.config.js

module.exports = {entry: './src/app',output: {path: './bin',filename: 'app.bundle'}
}

配置完后，在文件夹直接webpack即可

使用loader

loader应该是webpack的预加载工具

module.exports = {entry: './src/app.js',output: {path: './bin',filename: 'app.bundle.js'},module: {loaders: [{test: /\.js$/,exclude: /node_moudles/,loader: 'babel-loader'}]}
}

使用plugins

module.exports = {entry: './src/app.js',output: {path: './bin',filename: 'app.bundle.js'},module: {loaders: [{test: /\.js$/,exclude: /node_moudles/,loader: 'babel-loader'}]},plugins: [new webapck.optimize.UglifyJsPlugin({compress: {warnings: false},output: {comments: false}})]
}

CONFIGURATION OBJECT CONTENT

可以编写js，不仅仅是个json对象

entry

基本语法：
{context: _dirname + '/app',entry: './entry',output: {path: _dirname + '/dist',filename: 'bundle.js'}
}传入object时
{entry: {page1: './page1',page2: ['./entry1', './entry2']},output: {filename: '[name].bundle.js',chunkFilename: '[id].bundle.js'}
}

output

multiple entries
{entry: {app: './src/app.js',search: './src/search.js'            },output: {filename: '[name].js',path: __dirname + '/built'            }
}//outpu: ./built/app.js  ./built/search.js

output.pubicPath

适用于类似CDN匹配需求
可添加hash绕过缓存机制
output: {path: '/home/project/cdn/assets/[hash]',publicPath: "http://cdn.example.com/assets/[hash]/"
}

Watch

webpack有个很牛逼的地方，热刷新。

配置好文件后，下面命令可以监听文件变化

webpack --watch

在配置文件里一样可以实现：

module.exports = {entry: {app: './src/app.js'},output: {filename: 'bundle.js',},watch: true
}

在做网页开发时候，需要用到服务器，webpack提供了webpack-dev-server

安装很简单:

npm install webpack-dev-server -g

demo:

webpack-dev-server --host 0.0.0.0 --port 8080 --inline