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地址。
这里在浏览器中引用我们的资源只需要<script src='/assets/....'/>
output的chunkFilename是非输入点的文件片段（non-entry chunks as relative to the output.path）

[id]
is replaced by the id of the chunk.
[name]
is replaced by the name of the chunk (or with the id when the chunk has no name).
[hash]
is replaced by the hash of the compilation.
[chunkhash]
is replaced by the hash of the chunk.

现在我们要添加resolve属性, resolve属性是告诉webpack怎么寻找打包文件中的依赖关系，具体配置如下：

config.resolve = {

  extensions: ['', 'js'],
  modulesDirectories: ['node_modules', 'bower_components']
}

最后是plugin参数

config.plugin = {
  new webpack.ResolverPlugin([
    new webpack.ResulvePlugin.DiretoryDescriptionFilePlugin('.bower.json', ['main'])
  ])
}

这个配置告诉webpack对于bower的包怎么找entrypoints，因为可能没有package.json

执行命令

webpack -d --display-reasons --colors -- display-chunks --progress

Paste_Image.png

现在rails的assets/scripts中就已经生成了相关的chunk.
在rails中应用通过<%= javascript_include_tag 'bundle'%>

怎么把一些模块作为global模块

1. 在每一个模块都可以引用的到某些模块

现在我们是通过 var jquery = require('jquery')在一个模块中应用。但是在每一个模块中都要应用这个模块，就要在每一个模块中都写。那么有没有global module这个东西呢？
我们通过ProviderPlugin来实现，具体如下：

config.plugins = [
  .....
  new webpack.ProviderPlugin({
    $: 'jquery',
    jQuery: 'jquery',
  })
]

那么在每一个模块中都可以直接通过$或者jQuery来访问到'jquery'这个模块。

2.怎么把一些模块绑定到全局变量上（window）

比如把jquery暴露到全局上。

这里需要一个loader 叫做expose。 这个expose loader把一个module直接绑定到全局context上。

怎么用呢？代码如下：

require('expose?$!expose?jQuery!jquery');

这个语法看起来有一些怪，其实这个语法是应用两次expose用!连接，用?来传入参数。（expose?$ + ! + expose?jQuery + ! + jquery）。loader的语法就是这样的，比如引用一个css，用 loader可以这样写：
require('style!css! ./style.css');//载入css文件

source map的作用

上边的配置信息用webpack打包会自动产生一个bundle.map.js，这个文件就是 source map 文件。 这个source map的作用非常的大，我们打包之后下载一个bundle.js文件就好了不用再下载10个或20个文件（这样非常的慢），可是如果发生错误了，怎么办，有了source map我们可以看到这些错误在原来的individual files。

虚拟资源路径

在chrome中, webpack默认产生的source map会把所有的东西放到webpack://路径下，但是这个不太美观明了，可以通过output参数来设置，如下：

config.output = {
  ...
devtoolModuleFilenameTemplate: '[resourcePath]',
devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
}

现在虚拟资源在domain > assets了.
directory in the Sources tab.

loading coffeescript 和 其他编译语言

我们可以loader来自动的翻译这些语言。
当然，所有的loader都一样可以通过在require中处理，也可以通过设置config.js来的module.loaders来设置。
首先安装coffee loader
npm install coffee-loader --save-dev
现在我们可以设置resolve.extensions来使用coffeescript不需要后缀。

extensions: ['', '.js', '.coffee']

config中的module.loaders可以添加一个coffeescript的配置信息，如下

config.module = {
  loaders: [
    {
      test: /\.coffee$/,
      loader: 'coffee-loader'
    }
  ]
}

代码分割和lazy loading module(异步加载模块)

webpack可以通过require.ensure(['ace'], function(require){})来实现异步加载。
比如我们使用ace这个editor, 由于这个editor还是比较重的，所以只有在用的时候才加载，那么webpack可以split来确定的modules在一个自己单独的chunk file 中，只有应用的时候才调用，webpack会通过jsonp来实现，具体应用例子如下：

function Editor() {};
Editor.prototype.open = function() {
  require.ensure(['ace'], function(require) {
    var ace = require('ace');
    var editor = ace.edit('code-editor');
    editor.setTheme('ace/theme/textmate');
    editor.gotoLine(0);
  });
};

var editor = new Editor();
$('a[data-open-editor]').on('click', function(e) {
  e.preventDefault();
  editor.open();
});

多入口

其实上面的配置信息，对于单页面程序是没有问题的了，但是我们的rails，或者项目变大了，是多页面的。那么怎么处理呢？

1. 每一个页面一个entry

Each file would look something like this:

var SignupView = require('./views/users/signup');
var view = new SignupView();
view.render({ el: $('[data-view-container]')});

The Rails view just needs to have an element on the page with the data-view-container
attribute, include two bundles, and we’re done. No <script>
tags necessary.
<%= javascript_include_tag 'users-signup-bundle' %>

2. 一个入口，多个模块暴露到global(window)

利用webpack的exposeloader可以把它暴露到global上。

代码如下：

// entry.js
var $app = require('./app');

$app.views.users.Signup = require('./views/users/signup');
$app.views.users.Login = require('./views/users/login');

// app.js
module.exports = {
  views = {
    users: {}
  }
}

# ./views/users/signup.coffee
module.exports = class SignupView extends Backbone.View
  initialize: ->
    # do awesome things

配置loader

loaders: [
  {
    test: path.join(__dirname, 'app', 'frontend', 'javascripts', 'app.js'),
    loader: 'expose?$app'
  },
]

This will add the module.exports of the app.js module to window.$app, to be used by any <script> tag in a Rails view:

(function() {
  var view = new $app.views.users.Signup({ el: $('#signup-page') });
  view.render();
})();

同时采用多入口和expose

多个入口的方式，webpack有一个妙招，可以把公共的部分提取出来。

比如entry_1和entry_2都需要react和jquery，那么webpack可以把他们提取出来放到一个公共的chunk中。

这个功能可以通过webpack的CommonsChunkPlugin来实现。

代码如下：

plugins: [
  new webpack.optimize.CommonsChunkPlugin('common-bundle.js')
]

这个将output一个公共的文件common-bundle.js，这个里面包括最少的webpack bootstrap code 和 多个模块公用的modules。你可以直接在html中引用它

<%= javascript_include_tag 'common-bundle' %>
<%= javascript_include_tag 'public-bundle' %>

webpack的生产环境

那么我们把原来的webpack.config.js，删掉，新建三个文件common.config.js、development.config.js和production.config.js。其中config/webpack/common.config.js来写入一些基本的配置信息，如下：

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

var config = module.exports = {
  context: path.join(__dirname, '../', '../'),
};

var config.entry = {
  // your entry points
};

var config.output = {
  // your outputs
  // we'll be overriding some of these in the production config, to support
  // writing out bundles with digests in their filename
}

config/webpack/development.config.js如下：

var webpack = require('webpack');
var _ = require('lodash');
var config = module.exports = require('./main.config.js');

config = _.merge(config, {
  debug: true,
  displayErrorDetails: true,
  outputPathinfo: true,
  devtool: 'sourcemap',
});

config.plugins.push(
  new webpack.optimize.CommonsChunkPlugin('common', 'common-bundle.js')
);

config/webpack/production.config.js代码如下:

var webpack = require('webpack');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
var _ = require('lodash');
var path = require('path');

var config = module.exports = require('./main.config.js');

config.output = _.merge(config.output, {
  path: path.join(config.context, 'public', 'assets'),
  filename: '[name]-bundle-[chunkhash].js',
  chunkFilename: '[id]-bundle-[chunkhash].js',
});

config.plugins.push(
  new webpack.optimize.CommonsChunkPlugin('common', 'common-[chunkhash].js'),
  new ChunkManifestPlugin({
    filename: 'webpack-common-manifest.json',
    manfiestVariable: 'webpackBundleManifest',
  }),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.OccurenceOrderPlugin()
);

这里我们把输出目录换成了publice/assets，同时把文件名称添加chunkhash，来标记。
同时添加了ChunkManifestPlugin这个plugin。
UglifyJsPlugin来压缩
OccurenceOrderPlugin，which will shorten the IDs of modules which are included often, to reduce filesize.

创建一个rake,当然用gulp或者grunt也可以

namespace :webpack do
  desc 'compile bundles using webpack'
  task :compile do
    cmd = 'webpack --config config/webpack/production.config.js --json'
    output = `#{cmd}`

    stats = JSON.parse(output)

    File.open('./public/assets/webpack-asset-manifest.json', 'w') do |f|
      f.write stats['assetsByChunkName'].to_json
    end
  end
end

其中的--json是让webpack返回一个json的结果。
其中的stats['assetsByChunkName']是一个entry name -> bundle name的json文件。

如下：

{
  "common": "common-4cdf0a22caf53cdc8e0e.js",
  "authenticated": "authenticated-bundle-2cc1d62d375d4f4ea6a0.js",
  "public":"public-bundle-a010df1e7c55d0fb8116.js"
}

添加webpack的配置信息到rails

config/applicaton.rb

config.webpack = {
  :use_manifest => false,
  :asset_manifest => {},
  :common_manifest => {},
}

config/initializers/webpack.rb

if Rails.configuration.webpack[:use_manifest]
  asset_manifest = Rails.root.join('public', 'assets', 'webpack-asset-manifest.json')
  common_manifest = Rails.root.join('public', 'assets', 'webpack-common-manifest.json')

  if File.exist?(asset_manifest)
    Rails.configuration.webpack[:asset_manifest] = JSON.parse(
      File.read(asset_manifest),
    ).with_indifferent_access
  end

  if File.exist?(common_manifest)
    Rails.configuration.webpack[:common_manifest] = JSON.parse(
      File.read(common_manifest),
    ).with_indifferent_access
  end
end

如果要Rails.configuration[:use_manifest]那么就是配置asset_manifest和common_manifest。

config/environments/production.rb中

config.webpack[:use_manifest] = true

写一个helper来实现development和production对entry的调用

# app/helpers/application_helper.rb

def webpack_bundle_tag(bundle)
  src =
    if Rails.configuration.webpack[:use_manifest]
      manifest = Rails.configuration.webpack[:asset_manifest]
      filename = manifest[bundle]

      "#{compute_asset_host}/assets/#{filename}"
    else
      "#{compute_asset_host}/assets/#{bundle}-bundle"
    end

  javascript_include_tag(src)
end

其中的webpack-asset-manifest.json, 大概如下：

{
"common":"common-b343fccb2be9bef14648.js",
"ques":"ques-bundle-ad8e6456e397dd8e7144.js",
"activities":"activities-bundle-806617bb69dfc78f4772.js",
"pages":"pages-bundle-77b73a5a1a91cd3b92bd.js",
"pages_front":"pages_front-bundle-3e4ed8bdff3d2fc59a70.js"
}

所以可以利用这个来需找 entry name和bundle的文件的对应关系。

其中webpack-common-manifest.json,大概如下

{
"1":"ques-bundle-ad8e6456e397dd8e7144.js",
"2":"activities-bundle-806617bb69dfc78f4772.js",
"3":"pages-bundle-77b73a5a1a91cd3b92bd.js",
"4":"pages_front-bundle-3e4ed8bdff3d2fc59a70.js"
}

webpack会产生一个id为每一个entrypoint，默认webpack把这些ids存在common bundle中。但是问题是，不论什么时候你改变任何一个entrypoint的代码引发id的变化，那么common的代码都要更新，因此缓存就没有什么意义了。

而 ChunkManifestPlugin的作用就是不写在common中，而是写在外面的一个文件中，我们在rails中把它解析了并且绑到了window上的webpackBundleManifest变量，所以我们的webpack会自己去找这个变量.
所以我们的第二个helper就是来绑定这个变量，代码如下：

def webpack_manifest_script
  return '' unless Rails.configuration.webpack[:use_manifest]
  javascript_tag "window.webpackManifest = #{Rails.configuration.webpack[:common_manifest]}"
end