Webpacker/Webpack の設定

Webpack 4 の設定

base

  • webpack.EnvironmentPlugin
  • CaseSensitivePathsPlugin
  • MiniCssExtractPlugin
  • WebpackAssetsManifest

production

  • CompressionPlugin
  • OptimizeCSSAssetsPlugin
  • UglifyJsPlugin

development

  • webpack.HotModuleReplacementPlugin (HMR用)
  • webpack.NamedModulesPlugin (HMR用)

rules

  • babel (js/jsx/js.erb/jsx.erb)
  • 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.0.pre.3 · rails/webpacker – GitHub

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

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

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

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

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

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

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

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

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

insert – webpacker/config_list.js at v4.0.0.pre.3 · 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.5.5 · rails/webpacker – GitHub

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

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

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

webpacker/file.js at v3.5.5 · 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

参考:

webpacker/base.js at v3.5.5 · 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.5.5 · 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]

Webpack 4 – How to configure minimize? – Stack Overflow

check_yarn_integrity

参考:

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

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

Tagged:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です