Webpack使うならLaravel Mixでラクをする
cssを書くとき、sass/scssを書きたくなる。
javascriptを書くとき、babelを使う必要が出てくる。
そんな時、おそらくGulpかWebpack、を使うことを強いられる。
最近は、フロントエンドの開発環境にWebpackを使うことが増えてきたけど、
そんな時は、Laravel Mixを使うとすごく便利。という話。
自分は、Laravel MixというWebpackのラッパーを使って楽している。
Reactでも、Vueでも、BabelでもSassでも、PostCSSでも思いつくことは基本的にできる。
Webpackって、設定ファイルを書くのが面倒。Webpackの設定ファイルはカオスになる。それをうまい事隠してくれる。
個人的に、過去、Gulp -> Webpack -> Laravel Mixと試してきて、ふと、Webpackに戻ろうかと思ったけど、結局Laravel Mixに戻ってきた。
（Gulpだけで良い時もあるので、適材適所）
本記事ではこれらを比較して見た記事。
Laravel Mixとは
Laravel Mixは、PHPフレームワークであるLaravelに付いてるアセットパイプラインのライブラリ。PHP(Laravel)を使わなくともスタンドアロンでも利用できる。
スタンドアロンではなく、Laravel本体と一緒に使うとアセットのバージョニングとかもできるのでもっと便利になるけど、それは割愛。
Ruby On Railsでも似たようなものがあると思うけど、PHPerなのでLaravel。
ここで使う、Laravel Mixの雛形は、Githubに置いているので、自由に使ってください。
https://github.com/tomothumb/laravel-mix-boilerplate
GulpやWebpackとの比較
次の要件を実現するためにどのような設定が必要かそれぞれ見ていく。
要件
- .scssファイルを使いたい
- ベンダープレフィックスをつけたい
- 圧縮(minify)したい
- ソースマップを出力したい
- 「./src/scss/XXXX.scss」を「./dist/css/XXXX.css」に出力したい。
- javascriptは今回考慮しない。
なお、この記事は、GulpやWebpackの解説記事ではないので、それぞれの設定ファイルの解説は割愛してる。
Gulp
設定
設定ファイルは一つ。
/gulpfile.js
var gulp = require("gulp");
var plumber = require("gulp-plumber");
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require("gulp-autoprefixer");
gulp.task("sass", function() {
gulp.src("./src/scss/*.scss")
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer({
grid: true,
browsers: ['last 6 version']
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest("./dist/css"))
;
;
});
実行
$ gulp
実行結果
[実行前] /package.json /gulpfile.js # 設定ファイル /node_modules /index.html /src/scss/XXXX.scss [実行後] /package.json /gulpfile.js # 設定ファイル /node_modules /index.html /src/scss/XXXX.scss /dist/css/XXXX.scss # このファイルが生成される
感想
一つの機能に1つのパイプとして1行追加される感じ。分かりやすく、流行った理由がわかる。
Webpack
設定ファイルは2つ。
設定
以下２つ生成したいがための設定を書いている。
- /src/js/main.js -> /dist/js/main.js
- /src/scss/XXXX.scss -> /dist/css/XXXX.css
/webpack.config.js
module.exports = {
mode: 'development',
entry: {
main: './src/js/main.js',
XXXX: './src/scss/XXXX.scss'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/js')
},
module:{
rules:[
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: true,
importLoaders: 2
},
},
{
loader: 'postcss-loader',
options:{
sourceMap: true,
plugins: (loader) => [
require('autoprefixer')({
grid: true,
browsers: ['last 6 versions']
}),
]
},
},
{
loader: 'sass-loader',
options:{
sourceMap: true,
}
}
]
})
},
]
},
plugins: [
new ExtractTextPlugin("../css/[name].css")
]
};
実行
$ npx webpack
実行結果
[実行前] /package.json /webpack.config.js # 設定ファイル /node_modules /index.html /src/js/main.js /src/scss/XXXX.scss [実行後] /package.json /webpack.config.js # 設定ファイル /node_modules /index.html /src/js/main.js /src/scss/XXXX.scss /dist/js/main.js # このファイルが生成される。javascriptファイルのコンパイル版 /dist/css/XXXX.css # このファイルが生成される。CSSはこれを使う /dist/js/XXXX.js # このファイルが生成される。XXXX.cssのSourceMap
感想
設定ファイルがえげつない。。。
Laravel Mix
Webpackのラッパー。`webpack.config.js`の代わりに、`webpack.mix.js`を使う。
インストールは、公式のreadmeの通りだけど、
https://github.com/JeffreyWay/laravel-mix/blob/master/docs/installation.md
手っ取り早く、設定ファイルをgithubにあげたので、git cloneしてみると良い。
https://github.com/tomothumb/laravel-mix-boilerplate
設定
/webpack.mix.js
// 出力元のファイルと、出力先のディレクトリを指定する。
mix.js('src/js/main.js', 'dist/js/');
mix.sass('src/scss/style.scss', 'dist/css/')
.options({
autoprefixer: {
options: {
grid: true,
browsers: ['last 6 versions']
}
}
});
// develop環境の時にソースマップを表示するための設定を書いている。
if (!mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
.sourceMaps()
}
実行
Production環境とDevelop環境とで、Minifyする/しないの処理を、実行コマンドで分ける。
$ npm run production
$ npm run dev // 開発時
Webpackのラッパーなので、当然だけど、watchもhot moduleも可能。
（Hot Modulesは、別の設定必要。今回は触れない）
$ npm run watch // 更新の監視 $ npm run hot // Hot Moduleを利用（別の設定が必要。割愛）
実行結果
[実行前] /package.json /webpack.mix.js /node_modules /index.html /src/js/main.js /src/scss/XXXX.scss [npm run production 実行後] /package.json /webpack.mix.js # 設定ファイル /node_modules /index.html /mix-manifest.json # 実行したら生成される。Laravelでアセットのバージョニングする際に使われるもの。スタンドアロンでは不要。 /src/js/main.js /src/scss/XXXX.scss /dist/js/main.js # このファイルが生成される。javascriptファイルのコンパイル版 /dist/css/XXXX.css # このファイルが生成される。CSSはこれを使う [npm run dev実行後] /package.json /webpack.mix.js # 設定ファイル /node_modules /index.html /mix-manifest.json # 実行したら生成される。Laravelでアセットのバージョニングする際に使われるもの。スタンドアロンでは不要。 /src/js/main.js /src/scss/XXXX.scss /dist/js/main.js # このファイルが生成される。javascriptファイルのコンパイル版 /dist/js/main.js.map # main.jsのSoruceMapファイル /dist/css/XXXX.css # このファイルが生成される。CSSはこれを使う /dist/css/XXXX.css.map # XXXX.cssのSoruceMapファイル
感想
Webpackを理解していなくてもWebpackを使える。Webpackを理解するとMixの設定もわかるようになるので、Webpackを理解することは必要とは思うけれども、さっとWebpack試したい場合には、結構おすすめ。
参考URL
- Laravel公式ドキュメント アセットコンパイル
https://laravel.com/docs/master/mix - Laravel公式ドキュメント アセットコンパイル 日本語訳
https://readouble.com/laravel/5.6/ja/mix.html - Laravel Mixのドキュメント
https://giom/JeffreyWay/laravel-mix/tree/master/docs#readme - 今回用意したLaravel Mixの雛形
https://github.com/tomothumb/laravel-mix-boilerplate
