rails + webpack

webpack是一个强大的模块构建工具，主要用于前端开发，可以和npm和bower很好的配合。

和rails的asset对比，它有很多的优势。

1. 管理所有的包，通过npm或者bower

2.可以针对多种资源（js png css coffeescript jade es6 jsx）

3.能用commonjs的规范来实现模块依赖

4.能够异步加载通过 require.ensure

准备工作

1.新建一个rails 项目

2.安装npm install webpack -g

3.安装bower npm install bower -g，由于webpack并没有要求我们必须使用什么包管理器所以可以使用npm+bower

写webpack的基本配置信息

文件名用webpack.config.js

var path = require('path');
var webpack = require('webpack');

var config = {
  entry: './app/frontend/javascript/entry.js',
  context: __dir,
}

context: 指定了the base directory (绝对路径的位置)
entry: 打包的入口（the entry point for the bundle），可以接受一个单独的文件，可以接受数组，例如：

config.entry = ['./entry1.js', './entry2.js']

所有的文件都会启动时加载，最后一个作为输出；如果传入一个对象，那么会有多个bundles被创建，key是片段的名称，value是文件的位置或者数组，例如：

{
  entry: {
    page1: './page1',
    page2: ['./entry1', 'entry2'],
  },
  output: {
    filename: "[name].bundle.js",
    chunkFilename: '[id].bundle.js',
  }
}

后面这个文件会非常的复杂，这里我们只写一些最基本的必须的配置，后面会写入越来越多的配置信息。
现在我们只需要一个入口文件，所以可以直接写一个文件地址，多个入口的时候，entry可以接受数组和对象。（webpack找入口文件来开始打包确定依赖关系，没有在入口文件中确定的文件，是不会被打包的）
下一个属性，我们要写output，确定打包好的文件输出到哪里

config.output = {
  path: path.join(__dirname, 'app', 'asset', 'javascripts'),
  filename: 'bunlde.js',
  publicPath: '/assets',
}

filename: 输出的文件的名称，这里必须是相对的路径
path:输出文件的位置

多个entries时候，filename对每一个entry有一个唯一的name，有下面这几个选项：

[name] 被chunk的name替换
[hash]被compilation的hash替换
[chunkhash]被chunk的hash替换

output的publicPath指定了这些资源在浏览器中被调用的公共url地址。
这里在浏览器中引用我们的资源只需要