Hanamiでwebpackを使う方法 #Ruby

Hanamiでwebpackを使う方法を説明していきます。

プロジェクトの作成

mkdir hanami-webpack
cd hanami-webpack

Gemfile

# frozen_string_literal: true
source "https://rubygems.org"

gem "hanami", "1.0.0"

bundle install
bundle exec hanami new .
bundle install

ページの作成

bundle exec hanami g action web page#home

apps/web/config/routes.rb

- get '/page', to: 'page#home'
+ get '/home', to: 'page#home'

apps/web/templates/page/home.html.erb

<h1>Home</h1>

<div id=hello></div>

サーバ起動

bundle exec hanami s

localhost:2300/homeを開けば　Homeと表示されるはずです。

Assetsの削除　

Assetsは使わないので削除しましょう。

rm -rf apps/web/assets

apps/web/application.rb

- require 'hanami/assets'

...

- assets do
-   javascript_compressor :builtin
- 
-   stylesheet_compressor :builtin
- 
-   sources << [
-     'assets'
-   ]
- end

...

  configure :production do
-   assets do
-     compile false
-     fingerprint true
-     subresource_integrity :sha256
-   end
  end

webpackの導入

ここから先はapps/webに移動して作業します。
今どこのディレクトリにいるかをよく確認しながら作業してください。

cd apps/web
yarn init
yarn add webpack assets-webpack-plugin --dev
yarn add jquery

apps/web/webpack.config.js

var path = require('path');
var webpack = require('webpack');
var assetsPlugin = require('assets-webpack-plugin');

module.exports = {
  entry: './frontend/application.js',
  output: {
    path: path.resolve(__dirname, '..', '..', 'public'),
    filename: 'bundle_web-[hash].js'
  },
  plugins: [new assetsPlugin()]
};

mkdir frontend

apps/web/frontend/application.js

$ = require('jquery');

$('#hello').after('hello webpack');

webpack

これでプロジェクトファイル直下のpublicにbundle_web-aaaaaaaaa.jsファイルが、
apps/web以下にwebpack-assets.jsonができるはずです。

gitを使う場合はこの段階で.gitignoreを以下のように設定しておくと良いでしょう。

.gitignore

/apps/*/node_modules
/apps/*/webpack-assets.json
/public/bundle*

bundle_web.jsの読み込み

apps/web/views/application_layout.rb

  module Web
    module Views
      class ApplicationLayout
        include Web::Layout
+ 
+       def script_for(bundle)
+         path = Web::Application.configuration.root.join('webpack-assets.json')
+         file = File.read(path)
+         json = JSON.parse(file)
+         json[bundle]['js']
+       end
      end
    end
  end

apps/web/templates/application.html.erb

  <!DOCTYPE html>
  <html>
    <head>
      <title>Web</title>
-     <%= favicon %>
    </head>
    <body>
      <%= yield %>
+
+     <script type="text/javascript" src="#{script_for('main')}" charset="utf-8"></script>
    </body>
  </html>

これでlocalhost:2300/homeを開けば　hello webpackと表示されるはずです。

もしもEvalErrorがおきたら

hello webpackと表示されず、ブラウザのコンソールに以下のようなエラーが出ていた場合の対処です。

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy

apps/web/application.rb

  security.content_security_policy %{
    form-action 'self';
    frame-ancestors 'self';
    base-uri 'self';
    default-src 'none';
-   script-src 'self';
+   script-src 'unsafe-inline';
    connect-src 'self';
    img-src 'self' https: data:;
    style-src 'self' 'unsafe-inline' https:;
    font-src 'self';
    object-src 'none';
    plugin-types application/pdf;
    child-src 'self';
    frame-src 'self';
    media-src 'self'
  }

これで行けるはずです。