TL;DR

生のwebpackでやるとかんたんに死ねるよ(できなきゃないけど)
laravel-mix使えば秒殺、laravel-mixは救世主

久しぶりにwebpackやってみた

もともとlaravelでアプリケーション結構書いていたのにもかからわず何故かlaravel-mixの存在をすっかり忘れていた小生ですが、後輩くんのプルリクを見ながら話していて「( ﾟдﾟ)ﾊｯ!」と気が付きました。

我々にはlaravel-mixがあると。

小生は古いシステムのメンテナンスを担当しているのですが、オモテ面だけをきれいにしようということで今UIリニューアルをかけています。その際にどうせならwebpackしてしまおうと欲を出したのが事の始まり。

生でwebpackを書くと・・・

babel / polyfillどうする
scssのコンパイルどうする
cssのロードはどうする
jsのES5とか
jqueryとか他のライブラリとかは別で読み込みたいはどうするんだ
dev環境ではsource mapが欲しいはどうするんだ
js / cssの圧縮とか
npm run devとかで動かしたい、watchしたい
プラグインのロードどないするねん

考えなきゃいけないことがたくさんあって、考慮すればするほどwebpack.config.jsが長くなっていきます・・・。調べなきゃならないことも増えて、(　ﾟ皿ﾟ)ｷｰｯ!!

laravel-mixだと

webpack.mix.jsは31行で終了しました。まじで。

package.jsonを書く

dev / prd / watchとか
- npm run watchってやれば変更したらすぐ反映してくれる

    "scripts": {
        "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

webpack.mix.jsの例

  1 const mix = require('laravel-mix');
  2 const dist = 'dist';
  3
  4 mix
  5   .webpackConfig({
  6     module: {
  7         rules: [
  8           {
  9             test: /\.scss/,
 10             enforce: "pre",
 11             loader: 'import-glob-loader'
 12           }
 13         ]
 14       }
 15   })
 16   .setPublicPath(dist)
 17   .js('src/index.js', dist + '/js/')
 18   .sass('src/index.scss', dist + '/css/')
 19   .options({
 20     processCssUrls: false
 21   })
 22   .sass('src/vendor.scss', dist + '/css/')
 23   .extract([
 24     'jquery',
 25   ]);
 26
 27 if (mix.inProduction()) {
 28   mix.version();
 29 } else {
 30   mix.sourceMaps();
 31 }

import-glob-loaderは*でimportしてるときに必要

scss内でimport 'layout/*.scss'などとしてたら必要です

processCssUrls

falseでscss内でbackgroud-urlなどのパスを解決しない
- その代わり適切な場所に適切な画像ファイルを置く必要あり

extractでライブラリ的Jsを別ファイルにわけます

アプリでつくったjsとjQuery的なライブラリファイルを別にします
ライブラリ的なのは変更されることはないので、別ファイルに分けることでキャッシュを効かせやすくなります

結論

生でWebpackしてもいいけど、けっこうしんどいよ
webpack使うなら、laravel-mix使うべし

有益だけど難しいwebpackをlaravel-mixでかんたん便利に