rails5.2とDockerとwebpackerとbootstrap4【設定編】

前回のインストール編の続き

最終的には bin/webpack を実行してcssファイルが出来上がり、 public/packs/manifest.json にcssファイルのパスが出ることがゴールである。

まずは config/webpacker.yml の 該当の値を変更する。
これがまず大前提

#extract_css: false
extract_css: true

ただしこれだけではcssは静的ファイルとして出力されない。

.babelrcwebpacker.yml と競合するので最低限に設定

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

次にrails/webpack標準の設定を見てみる。

config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

environmentをrequireしてそのままmodule.exportsしているだけである。

config/webpack/environment.js

そしてenvironment.jsは下記のようになっている。

const { environment } = require('@rails/webpacker')

module.exports = environment

ここにpluginや設定を追加していく。

$ yarn add -D babel-core \
  babel-polyfill \
  babel-preset-env \
  babel-loader@8  \
  clean-webpack-plugin \
  mini-css-extract-plugin \
  import-glob-loader \
  css-loader \
  sass-loader \
  webpack-merge

設定変更

config/webpack/environment.js を下記のように書き換える。

const { environment } = require('@rails/webpacker')
const { resolve } = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const rootPath = resolve(__dirname, '../..')
const pathsToClean = [ 'packs', 'packs-test' ]
const cleanOptions = {
  root: resolve(rootPath, 'public'),
  verbose: true,
}

// defaultのcss関連のloaderをまとめて消す
environment.loaders.delete('css')
environment.loaders.delete('sass')
environment.loaders.delete('moduleSass')
environment.loaders.delete('moduleCss')

environment.loaders.prepend('scss', {
  test: /\.(css|sass|scss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader',
    'import-glob-loader'
  ]
})

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/dist/jquery',
    jQuery: 'jquery/dist/jquery',
    Popper: 'popper.js/dist/popper'
  })
)

if (process.env.NODE_ENV !== 'test') {
  environment.plugins.insert('CleanWebpackPlugin', new CleanWebpackPlugin(pathsToClean, cleanOptions))
}

environment.plugins.insert('MiniCssExtractPlugin', new MiniCssExtractPlugin({filename: '[name]_[contentHash].css'}))

module.exports = environment

config/webpack/development.js を以下のようにする

process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const merge = require('webpack-merge')
const environment = require('./environment')
const config = environment.toWebpackConfig()

module.exports = merge(config, {
  mode: process.env.NODE_ENV,
  devtool: 'inline-source-map'
})

config/webpack/production.js も同じように書き換えるが inline-source-map は有効にしない

最後に

version依存などの関係でyarn install時にwarningが多発する場合、モジュールをアップデートしておくといいと思う。

$ yarn upgrade

コメントを残す