Webpack使うならLaravel Mixでラクをする

by codechord. 0 Comments

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

ソースを表示
印刷SyntaxHighlighterについて
1var gulp = require("gulp");
2var plumber = require("gulp-plumber");
3var sass = require('gulp-sass');
4var sourcemaps = require('gulp-sourcemaps');
5var autoprefixer = require("gulp-autoprefixer");
6 
7gulp.task("sass", function() {
8    gulp.src("./src/scss/*.scss")
9        .pipe(plumber())
10        .pipe(sourcemaps.init())
11        .pipe(sass())
12        .pipe(autoprefixer({
13            grid: true,
14            browsers: ['last 6 version']
15        }))
16        .pipe(sourcemaps.write('./maps'))
17        .pipe(gulp.dest("./dist/css"))
18        ;
19    ;
20});

実行

ソースを表示
印刷SyntaxHighlighterについて
1$ 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

ソースを表示
印刷SyntaxHighlighterについて
1module.exports = {
2    mode: 'development',
3    entry: {
4        main: './src/js/main.js',
5        XXXX: './src/scss/XXXX.scss'
6    },
7    output: {
8        filename: '[name].js',
9        path: path.resolve(__dirname, 'dist/js')
10    },
11    module:{
12        rules:[
13            {
14                test: /\.scss$/,
15                use: ExtractTextPlugin.extract({
16                    fallback: 'style-loader',
17                    use: [
18                        {
19                            loader: 'css-loader',
20                            options: {
21                                minimize: true,
22                                sourceMap: true,
23                                importLoaders: 2
24                            },
25                        },
26                        {
27                            loader: 'postcss-loader',
28                            options:{
29                                sourceMap: true,
30                                plugins: (loader) => [
31                                    require('autoprefixer')({
32                                        grid: true,
33                                        browsers: ['last 6 versions']
34                                    }),
35                                ]
36                            },
37                        },
38                        {
39                            loader: 'sass-loader',
40                            options:{
41                                sourceMap: true,
42                            }
43                        }
44                    ]
45                })
46            },
47        ]
48    },
49    plugins: [
50        new ExtractTextPlugin("../css/[name].css")
51    ]
52};

実行

ソースを表示
印刷SyntaxHighlighterについて
1$ 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

ソースを表示
印刷SyntaxHighlighterについて
1// 出力元のファイルと、出力先のディレクトリを指定する。
2mix.js('src/js/main.js', 'dist/js/');
3mix.sass('src/scss/style.scss', 'dist/css/')
4    .options({
5        autoprefixer: {
6            options: {
7                grid: true,
8                browsers: ['last 6 versions']
9            }
10        }
11    });
12 
13// develop環境の時にソースマップを表示するための設定を書いている。
14if (!mix.inProduction()) {
15    mix.webpackConfig({
16        devtool: 'source-map'
17    })
18    .sourceMaps()
19}

実行

Production環境とDevelop環境とで、Minifyする/しないの処理を、実行コマンドで分ける。

ソースを表示
印刷SyntaxHighlighterについて
1$ npm run production
ソースを表示
印刷SyntaxHighlighterについて
1$ npm run dev // 開発時

Webpackのラッパーなので、当然だけど、watchもhot moduleも可能。
（Hot Modulesは、別の設定必要。今回は触れない）

ソースを表示
印刷SyntaxHighlighterについて
1$ npm run watch // 更新の監視
2$ 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

関連記事


コメントを残す

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

CAPTCHA