Webpack是一个模块打包工具，可以兼容多种js书写规范，并且具体requireJS和browserif有的功能，有空的时候在项目的前端搭上了webpack，能更好地模块化管理前端代码，下面就和大家分享一下ruby on rails框架（http://www.maiziedu.com/course/ruby/）中配置webpack的基本信息，期待更多交流。
基本配置
安装 webpack
在项目的目录下创建 package.json 来管理需要的外部 module：
{
　"name": "app",
　"description": "the app",
　"version": "1.0.0",
　"dependencies": {
　　"coffee-loader": "^0.7.2",
　　"coffee-script": "^1.10.0",
　　"exports-loader": "~0.6.2",
　　"expose-loader": "~0.6.0",
　　"imports-loader": "~0.6.3",
　　"css-loader": "~0.6.3",
　　"underscore": "~1.8.3",
　　"webpack": "~1.4.13",
　　"jquery": "~2.1.4"
　}}

安装需要的 module（墙内可以使用淘宝镜像 https://npm.taobao.org/ ）
npm install
安装 webpack
npm install -g webpack
配置 webpack
由于webpack本身功能的强大，配置文件也可以很复杂，这里简单配置一下，添加一个叫 webpack.config.js 的文件
var path = require('path');var webpack = require('webpack');
var config = module.exports = {
　context: __dirname,
　// 告诉 webpack 去哪里找 entry 文件
　// entry 文件最终会被 compile 出来
　// 我们将新的 js 代码都统一放在 app/frontend/javascritps 文件夹下面
　entry: './app/frontend/javascripts/entry.js'};
config.output = {
　// 告诉 webpack 根据 entry 文件编译出来的文件叫 bundle.js
　// 并把文件生成到 app/assets/javascripts 目录下，这样 Rails 的 Asset Pipeline 便可以直接使用
　path: path.join(__dirname, 'app', 'assets', 'javascripts'),
　filename: 'bundle.js',
　publicPath: '/assets'};
config.resolve = {
　// 告诉 webpack 可引用文件的后缀
　// 比如我们添加了 '.js'，所以可以用 require('app') 来代替 require('app.js')
　extensions: ['', '.js', '.coffee']};
config.module = {
　loaders: [
　　// 用来 load CoffeeScript
　　{ test: /\.coffee$/, loader: 'coffee-loader' },
　],};
entry.js 可以是任何 js 文件，里面可以通过 require 来引用其他的 module，举个例子：
_ = require('underscore')console.log(_.keys({"foo": "bar"}))
运行 webpack
运行以下命令，webpack 会根据上一步的配置文件生成一个 bundle.js
webpack -d --display-reasons --display-chunks --progress
之后只需要在 view 里引用生成的 js 文件（bundle.js）
<%= javascript_include_tag 'bundle'　%>

配置bower
因为有些 module 只有 bower 有，所以我们可以在使用 npm 的同时也使用 bower
安装 bower
npm install -g bower
添加 bower.json
{
　"name": "app",
　"version": "1.0.0",
　"description": "the app",
　"dependencies": {
　　"jquery": "~1.11.0"
　}}

在 webpack 配置里添加 bower_components
config.resolve = {
　...
　modulesDirectories: [ 'node_modules', 'bower_components' ],
　...};
再添加一个 plugin （这里感叹一下 webpack 的 plugin 相当之丰富）
config.plugins = [
　// 告诉 webpack 除了 package.json，还可以去哪里寻找 module 的描述
　new webpack.ResolverPlugin([
　　new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
　])];
配置好之后就可以同时使用 npm 和 bower 的 package 啦
bower install
多个 entry 文件
以上的配置都只是一个 entry 文件（entry.js），有时候需要多个 entry 文件来更好分离不同页面的 js，那么可以使用以下配置：
var config = module.exports = {
　...
　entry: {
　　entry1: './app/frontend/javascripts/entry1.js',
　　entry2: './app/frontend/javascripts/entry2.js
　}
　...
};

config.output = {
　...
　// 生成的文件直接使用 entry 的名称来命名
　filename: '[name]_bundle.js',
　...};
之后我们在 view 里需要的地方便可使用 entry1_bundle.js 和 entry2_bundle.js
开发环境设置
开发环境里可以使用以下的命令让 webpack 保持自动编译前端代码：
webpack --watch --colors
当然也可以使用 foreman 统一设置，比如我们项目的 Procfile：
sidekiq: bundle exec sidekiq
web: rails server
webpack: webpack --watch --colors
教程里还提到了一些高级的配置，感兴趣的同学可以试试
配置全局 module，比如配置 jQuery 之后，不需要在每个文件都 $ = require('jquery')。
自动提取共享 module，使用 webpack.optimize.CommonsChunkPlugin 来自动抽取不同 entry 文件里面共用的 module，生成一个新文件。
生产环境可以给生成的 js 文件添加类似 Rails 的 fingerprint。
待解决问题
生产环境下 Rails 会给图片添加 fingerpint，所以之前有些 js 文件添加了 .erb 后缀通过服务器渲染来使用 asset_path 调用图片。 webpack 对于此类 js 似乎没有一个优雅的解决方案。目前我的做法是将这些 js 继续保留在了 Asset Pipeline 里。
webpack 是支持打包 css 和 image 的，还在研究如何将 Rails 里的 CSS/SASS 也使用 webpack 打包。