app,assets,javascripts,static_resources.js

## app,assets,javascripts,static_resources.js
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('../images/', true, /\..*$/));
requireAll(require.context('./vendors/', true, /\..*$/));

## app,helpers,assets_helper.rb
module AssetsHelper
  def stylesheet_link_tag(*sources)
    sources = get_assets_sources(sources, 'css')
    super(*sources)
  end

  def javascript_include_tag(*sources)
    sources = get_assets_sources(sources, 'js')
    super(*sources)
  end

  private

  def assets_manifest
    manifest_file = Rails.root.join('public','assets','manifest.json')
    JSON.load(manifest_file)
  end

  def get_assets_sources(sources, ext)
    sources = sources.uniq.map do |source|
      if source.is_a?(String)
        source += ".#{ext}" unless source =~ /\.#{ext}\z/
        path = assets_manifest[source]
        if path
          "/assets/#{path}"
        else
          raise "Cant get #{source}"
        end
      else
        source
      end
    end
  end

end

## package.json
{
  "name": "sharefoldr.io",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "async": "^1.3.0",
    "babel-core": "^5.0.12",
    "babel-loader": "^5.0.0",
    "body-parser": "^1.9.3",
    "css-loader": "^0.14.0",
    "style-loader": "^0.12.3",
    "express": "^4.7.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "file-loader": "^0.8.1",
    "html-loader": "^0.3.0",
    "items-store": "^0.7.0",
    "markdown-loader": "^0.1.2",
    "null-loader": "^0.1.0",
    "react": "^0.13.1",
    "react-hot-loader": "^1.0.0",
    "react-proxy-loader": "^0.3.1",
    "react-router": "^0.13.2",
    "stats-webpack-plugin": "^0.1.2",
    "style-loader": "^0.12.0",
    "superagent": "^1.1.0",
    "url-loader": "^0.5.5",
    "uuid": "^2.0.1",
    "webpack": "^1.10.1",
    "webpack-dev-server": "^1.10.1",
    "sass-loader": "^1.0.2",
    "react-semantify": "^0.3.1",
    "webpack-manifest-plugin": "^0.3.0",
    "chunk-manifest-webpack-plugin": "^0.0.1"

  },
  "devDependencies": {
    "babel-eslint": "^3.0.1",
    "eslint": "^0.22.0",
    "eslint-plugin-react": "^2.2.0"
  }
}

## webpack.config.js
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ManifestPlugin = require('webpack-manifest-plugin');

var contextPath = __dirname + '/app/assets/javascripts';

module.exports = {
    context: contextPath,
    entry: {
        application: './application.js',

        //用來確保所有的圖片跟 vendors js 都會被打上 digest
        static_resource: './static_resources.js',

    },
    output: {
        filename: '[name].[hash].js',
        path: __dirname + '/public/assets',
        publicPath: "/assets/"
    },
    module: {
        loaders: [
            { test: /vendors/,   exclude: /node_modules/, loader: 'file-loader?name=[path][name].[hash].[ext]'},
            { test: /\.jsx?$/, exclude: /(node_modules|vendors)/, loaders: ['react-hot', 'babel'] },
            { test: /\.css$/,  loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
            { test: /\.png$/,  loader: "url-loader?limit=100000&name=[name].[hash].[ext]" },
            { test: /\.jpg$/,  loader: "file-loader?name=[name].[hash].[ext]" },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&minetype=application/font-woff&name=[name].[hash].[ext]",
            },
            { test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader?name=[name].[hash].[ext]",
            },
            {   test: /\.scss$/,    loader: ExtractTextPlugin.extract(
                    // activate source maps via loader query
                    'css?sourceMap!' +
                    'sass?sourceMap'
            ) }
        ],

        noParse: [
          /[\/\\]vendors[\/\\].*\.js$/
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ["node_modules", "javascripts"],
    },
    externals: {
        "react": 'React',
        "react/addons": "React",
        "jquery": 'window.jQuery',
        semantic: 'semantic'
    },
    devtool: "sourcemap",
    plugins: [
        new ExtractTextPlugin("[name].[hash].css", {
            disable: false,
            allChunks: true
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            React: 'react'
        }),

        // 生成 manifest.json, imageExtensions 這邊用來處理 static resource
        new ManifestPlugin({
            imageExtensions: /^(jpe?g|png|gif|svg|woff|woff2|otf|ttf|eot|svg|js)(\.|$)/i
        })

    ]
};