Webpackerの便利な小ネタ

はじめに

Webpackerは、Rails 5.1以降で標準的に提供されているJavaScriptとCSSのビルドツールです。Webpackerは、JavaScriptのモジュール化とエコシステムをフレームワークに直接統合することで、より強力でシンプルなJavaScript開発を促進します。しかし、初めて使用する場合は、Webpackerの設定に慣れるまで、やや混乱する場合があります。今回は、Webpackerをより効果的に使用するための便利な小ネタを紹介します。

Vue.jsの設定

Webpackerは、Vue.jsを使用するための強力なサポートを提供します。すぐに始めるために、vue-cli-rails gemを追加し、アプリケーションにVue.jsを簡単に設定できます。ただし、Vue.jsを使用する場合は、エントリーファイルのためにapp.vueを使うことに注意してください。

# app/javascript/packs/application.js

import Vue from 'vue'
import App from './app.vue'
new Vue({
    render: (h) => h(App)
}).$mount('#app')

CSSの自動プリフィックス

Webkit系（Google Chrome、Safari等）とFirefoxとの間でCSS履歴が異なる場合があるため、自動的にベンダープレフィックスを適用することが重要です。これは、Webpackerを使用して簡単に実行できます。

# app/javascript/stylesheets/application.scss

@import "./variables";

body {
  background-color: $background-color;
  display: flex; /* Very basic flex layout */
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* Applying vendor prefixes using PostCSS */
:fullscreen a {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Defined in app/javascript/config/autp-prefixer.js */
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

静的なファイルのコピー

アプリケーションで使う画像などの静的なファイルをWebpackerに追加した場合、これらのファイルはWebpackerに自動的にバンドルされます。ただし、Webpackerが自動的に生成したファイルを参照する唯一の方法は、それらのファイルへの相対パスを指定することです。これは、一般的なRailsのルーティング方式とは異なります。

よって、静的なファイルを直接使用したい場合は、Webpackerの簡単な設定を行う必要があります。これを設定することで、指定したディレクトリ内の静的ファイルを自動的にRailsのpublic/assetsディレクトリにコピーすることができます。

// config/webpack/custom.js
const path = require('path');
const glob = require('glob');
const base = require('./base');

const config = Object.assign({}, base);

// Add image assets to Rails' asset pipeline
config.module.rules.push({
    test: /\.(png|gif|jpe?g|svg)$/i,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]',
            },
        },
    ],
});

// Copy favicon to Rails' public/assets directory
config.plugins.push(
    new CopyWebpackPlugin([
        {
            from: path.resolve('app/javascript/images/favicon.ico'),
            to: path.resolve('public/assets/'),
        },
    ])
);

module.exports = config;

WebpackerのJavaScriptライブラリの扱い方

Webpackerを使ってビルドすると、すべてのJavaScriptライブラリがビルドディレクトリに含まれます。これは、非常に煩わしい場合があります。しかし、Webpackerは、ライブラリを別のディレクトリに移動することができます。

以下は、Javascriptライブラリをアプリケーションルートのvendor/assets/javascriptsディレクトリに移動する例です。

{
  "resolve": {
    "alias": {
      "lib-path": "file-loader?name=../vendor/assets/javascripts/[name].[ext]!./src/javascript/lib"
    }
  }
}

これで、JavaScriptライブラリがアプリケーションのvendorディレクトリに保存され、Railsの通常の方式で読み込むことができます。

まとめ

以上がWebpackerを使用する上で便利な小技です。Webpackerは、JavaScriptとCSSのビルドに強力なサポートを提供するだけでなく、Railsフレームワークに直接統合されることで、便利な機能を提供しています。これらのヒントや技法を使用することで、Webアプリケーション開発の生産性が向上することが期待できます。