Webpacker / Webpack の設定 [Rails]

Webpack 4 の設定

base

• webpack.EnvironmentPlugin：process.env に含まれる環境変数を透過的にする。
• CaseSensitivePathsPlugin：macOS 上でも大文字小文字を区別したパスを用いる。
• MiniCssExtractPlugin：CSS を抽出してファイルとして出力する。
• WebpackAssetsManifest：生成したファイルの対応を示したマニフェストを出力する。
• PnpWebpackPlugin：node_modules にインストールしたパッケージの解決を簡易化する。

production

• TerserPlugin：JavaScript コードの圧縮・難読化・ソースマップの出力などの変換を行う。
• CompressionPlugin：gzip による圧縮ファイルを作成する。
• OptimizeCSSAssetsPlugin：CSS ファイルの最適化を行う。
• safePostCssParser：壊れた CSS などを安全に読み込める PostCSS パーサー。

development

• webpack.HotModuleReplacementPlugin：HMR を利用可能にする。

rules

• babel (js/jsx/mjs/js.erb/jsx.erb/mjs.erb)
• node_modules 用の babel (js/mjs)
• file (jpg/jpeg/png/gif/tiff/ico/svg/eot/otf/ttf/woff/woff2)
• css (css)
• sass (scss/sass)
• module.css (css)
• module.sass (scss/sass)

loaders

• babel-loader
• file-loader
• style-loader
• css-loader
• post-css-loader
• MiniCssExtractPlugin.loader (extractCSS 用)
• sass-loader

参考：

webpacker/webpack.md at v4.0.7 · rails/webpacker – GitHub

webpacker/webpacker.yml at v4.0.7 · rails/webpacker – GitHub

webpacker/base.js at v4.0.7 · rails/webpacker – GitHub

webpacker/production.js at v4.0.7 · rails/webpacker – GitHub

webpacker/development.js at v4.0.7 · rails/webpacker – GitHub

webpacker/test.js at v4.0.7 · rails/webpacker – GitHub

webpacker/rules/index.js at v4.0.7 · rails/webpacker – GitHub

webpacker/babel.js at v4.0.7 · rails/webpacker – GitHub

webpacker/node_modules.js at v4.0.7 · rails/webpacker – GitHub

webpacker/file.js at v4.0.7 · rails/webpacker – GitHub

webpacker/css.js at v4.0.7 · rails/webpacker – GitHub

webpacker/sass.js at v4.0.7 · rails/webpacker – GitHub

webpacker/get_style_rule.js at v4.0.7 · rails/webpacker – GitHub

webpacker/config_object.js at v4.0.7 · rails/webpacker – GitHub

webpacker/config_list.js at v4.0.7 · rails/webpacker – GitHub

insert – webpacker/config_list.js at v4.0.7 · rails/webpacker – GitHub

Webpack 3 の設定

参考：

Webpacker 3.0 での Webpack の設定カスタマイズ | upinetree’s memo

webpacker を使った rails アプリを実行するとき、TypeError: environment.plugins.set is not a function というエラーが出る – Qiita

webpacker/webpack.md at 3-x-stable · rails/webpacker – GitHub

webpacker/base.js at v3.6.0 · rails/webpacker – GitHub

webpacker/production.js at v3.6.0 · rails/webpacker – GitHub

webpacker/development.js at v3.6.0 · rails/webpacker – GitHub

webpacker/babel.js at v3.6.0 · rails/webpacker – GitHub

webpacker/file.js at v3.6.0 · rails/webpacker – GitHub

Webpacker の設定

参考：

webpacker/webpack.md at master · rails/webpacker – GitHub

ローダーの設定

参考：

Best Practices for overriding loader options · Issue #756 · rails/webpacker – GitHub

プラグインの設定

参考：

Plugins – webpacker/webpack.md at 3-x-stable · rails/webpacker – GitHub

resolve.alias

参考：

Rails 5.1.3 + Webpacker 3.1 で sass と js の管理を Sprockets から Webpacker に移行する – Qiita

Configuration – webpacker/webpack.md at 3-x-stable · rails/webpacker – GitHub

Rails 5.1 Webpacker Vue.js 動かそうとするとコンポネントエラーになる問題 – Qiita

getEntryObject

参考：

getEntryObject – webpacker/base.js at v3.6.0 · rails/webpacker – GitHub

CSS / Sass / SCSS の設定

参考：

Rails 5.1 + Webpacker で Bootstrap4-beta を読み込む – Qiita

webpacker/css.md at 3-x-stable · rails/webpacker – GitHub

Sass / SCSS で共通の変数、ミックスインを読み込む

{
  loader: 'sass-loader',
  options: {
    data: `
      @import "@/scss/_variables.scss";
      @import "@/scss/_mixins.scss";
    `
  }
}

参考：

Webpacker で共通の sass ファイルを自動で読み込む | イソップブログ

webpack/sass-loader で import 毎に共通ファイルを読み込ませる – Qiita

Globally Load SASS into your Vue.js Applications | Vue.js Tutorials

Something wrong with provided resources · Issue #35 · shakacode/sass-resources-loader – GitHub

indentedSyntax in Sass-resources-loader · Issue #25 · shakacode/sass-resources-loader – GitHub

shakacode/sass-resources-loader: SASS resources (e.g. variables, mixins etc.) loader for Webpack – GitHub

PostCSS

参考：

Sass (SCSS) から webpacker + PostCSS に移行してみるか | blog.unresolved.xyz

How to use webpacker plugins? · Issue #283 · rails/webpacker – GitHub

babel-loader

参考：

webpacker/babel.js at v3.6.0 · rails/webpacker – GitHub

import-glob-loader

参考：

Webpacker で Sass の glob パターンの一括 import を有効にする | イソップブログ

UglifyJsPlugin

参考：

webpack@4 の mode と minimize (UglifyJS) | 30歳からのプログラミング

UglifyJsPlugin – webpacker/production.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpack-contrib/uglifyjs-webpack-plugin: UglifyJS Plugin – GitHub

Optimization | Webpack [Official]

How to configure minimize? – Stack Overflow

check_yarn_integrity

参考：

Webpacker を使っている人は webpacker.check_yarn_integrity を有効にしよう | Yoshiyuki Hirano

public_file_server

アプリケーションサーバーで public/packs 以下のファイルへのリクエストにレスポンスさせる。

config.public_file_server.enabled = true

参考：

ActionController::RoutingError (No route matches [GET] “/packs/index-effb542be2baccc64610.js” · Issue #1190 · rails/webpacker – GitHub

merge

参考：

merge – webpacker/config_object.js at v4.0.0.pre.3 · rails/webpacker – GitHub

deepMerge

参考：

webpacker/deep_merge.js at v4.0.0.pre.3 · rails/webpacker – GitHub