SAHARA

webpack-railsの使い方

更新回数:8回 | 2016/04/08更新
編集者:Thumb img 0
 railsのgem、webpack-railsの使い方を解説します。webpack-railsは簡単にwebpackを統合でき、他のgemに比べて開発スピードを落とすことなく使用することができます。

インストール

Gemfileにgemを追加してください。
gem 'webpack-rails'
gemをインストールします。
bundle install
初期ファイルを生成します。
bundle exec rails generate webpack_rails:install
webpackで管理するjsファイルを読み込みます。
application.html.erbhead内へ、以下を追加します。
<%= javascript_include_tag *webpack_asset_paths("application") %>
以上で、インストールは終わりです。次の開発へ進んでください。

開発

webpack-dev-serverとrailsサーバーを同時に起動させます。
foreman start
webpack/application.jsが実行されていることがわかります。

自動ロード

application.html.erbのbodyタグ下へ以下を追加。
<% if Rails.env == 'development' %>
    <script src="http://localhost:3808/webpack-dev-server.js"></script>
<% end %>

es6 + react.js

reactをインストール。
npm install react react-dom --save
npmを使用しまずはbable-core, babel-loaderをインストールします。
npm install babel-core babel-loader --save-dev

es6, jsx(react)のプリセットをそれぞれインストールします。
# For ES6/ES2015 support
npm install babel-preset-es2015 --save-dev
# If you want to use JSX
npm install babel-preset-react --save-dev

webpack.config.jsへ設定を書き込みます。

var config = {
 module: {
  loaders: [
    {
      loader: "babel-loader",
      test: /\.jsx?$/,
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
 }
};



Herokuへデプロイ

[未完成]

AWSへデプロイ

デプロイ前に、ローカルでwebpackで管理しているjsを全て1つにまとめassetsに組み込みます。
まず、webpack/以下を1つのファイルにまとめるため、以下を実行します。
rake webpack:compile
/public/webpack/application-***.jsが生成されますが、AWSのサービスelastic beanstalkを使いアップロードするとファイルの場所がhttp://domain/public/webpack/application-***.jsとなりますが、webpackのロード先はhttp://domain/webpack/application-***.jsとなりロードができなくなるので修正します。
config/initializers/overrite/webpack-rails.rbを作成し以下のようにwebpack-railsのコードのpathを返す部分を訂正するコードを書きます。
Webpack::Rails::Manifest.class_eval do
  def self.asset_paths(source)
    paths = manifest["assetsByChunkName"][source]
    if paths
      # Can be either a string or an array of strings
      [paths].flatten.map do |p|
        if Rails.env == 'development'
        "/#{::Rails.configuration.webpack.public_path}/#{p}"
        else Rails.env = 'production'
        "/#{::Rails.configuration.webpack.output_dir}/#{p}"
        end
      end
    else
      raise EntryPointMissingError, "Can't find entry point '#{source}' in webpack manifest"
    end
  end
end
以上より、AWSのelastic beanstalkを使用しデプロイすれば動作するようになります。
発言はまだありません。
発言するにはログインもしくは、会員登録をしてください。