webpack4 で既存 CSS を扱う

webpack で CSS を扱う場合、プラグインを使う必要があるのだけど、Webpack 4 で使うプラグインが変わったため気を付ける(この間 webpack を初めて触ってハマった)。

mini-css-extract-plugin と css-loader を使う。

関連パッケージインストール

yarn で入れる場合。

$ yarn add webpack --dev
$ yarn add mini-css-extract-plugin --dev
$ yarn add css-loader --dev

npm の場合。

$ npm install --save-dev mini-css-extract-plugin

package.json に下記 script を追加 (既に scripts がある婆いは “webpack” の行を中に追記する)。

// package.json
  "scripts": {
    "webpack": "webpack",
  }

使い方

• 加工対象の CSS は /src/assets/css 以下に配置想定
• 手元の作業ファイルを元に説明用に抜き出して書いただけなので未実行&未確認

// webpack.config.js
// css 操作用
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// ファイル PATH などを操作する用
const path = require('path')

module.exports = {
  plugins: [new MiniCssExtractPlugin({
    filename: 'css/[name].css' // [name] が個別のファイル名 (拡張子なし) に置き換わる
  })],
  mode: 'development', // 例なので develop 固定
  entry: {
    // path.resolve は引数を参照し PATH を解決する
    // ドキュメント (英語): https://nodejs.org/docs/latest/api/path.html#path_path_resolve_paths
    // __dirname は実行されたスクリプトの存在するディレクトリの絶対 PATH を取得する
    // 引数は全て / で結合されると思っていい (OS の PATH の扱いを勝手に処理してくれる)
    'app': path.resolve('__dirname', 'src', 'assets', 'css')
  },

  output: {
    // /dist に出力 (ディレクトリが無ければ作る)
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
      {
        test: /\.css$/, // 対象の拡張子を正規表現で指定 (名前が .css で終わるファイルを対象)
        use: [
          // 使用するローダーを指定する。配列の最後から順に実行される。
          // 例) css-loader, MiniCssExtractPlugin.loader の順番で実行される
          MiniCssExtractPlugin.loader, // css を最終的に個別で扱うプラグイン
          'css-loader' // css 処理
        ]
      }
    ]
  }
}

実行

$ yarn webpack # yarn で入れた場合 (npm 実行でも良いけど)
or
$ npm run webpack # npm で入れた場合

これで /dist/css 以下に app.css が出来る筈。

感想

gulp でやってた時よりは面倒ではないけど、それでもかなり知見が必要とされる作業だと思った。 CSS 自体の扱いが面倒なのが (気持ちとしては標準で扱えて欲しい) なんともだけど、プラグインで対応できるならまぁ良いかという具合。

あと、最初軽く流してた entry がかなり動作の軸に存在していて、この役割と実際の挙動を理解していないと多分詰む。

ただ、英語ドキュメント読むの辛い人が触ると辛さしかなさそうなレベルで日本語の良い粒度の知見が見当らないので webpack おじさんになる覚悟は必要。

良く眺めてた参考リンク。 https://webpack.js.org/configuration/