前回のインストール編の続き
最終的には bin/webpack を実行してcssファイルが出来上がり、 public/packs/manifest.json にcssファイルのパスが出ることがゴールである。
まずは config/webpacker.yml の 該当の値を変更する。
これがまず大前提
#extract_css: false
extract_css: trueただしこれだけではcssは静的ファイルとして出力されない。
.babelrc が webpacker.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 = environmentconfig/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
One Response on “rails5.2とDockerとwebpackerとbootstrap4【設定編】”