ビルドツール「Webpack」を試す。LESSをCSSにビルド

投稿日：
ReactのチュートリアルをやっているときにBabelのビルドツールとしてWebpackを導入したときの覚書。

環境： CentOS 7.6, Node.js v11.14.0, webpack v4.39.3

今までのタスクランナーは
Grunt → PhpStormのファイル監視機能
を使って問題なく開発していた。

Reactを学ぶ際に、最近流行りのWebpackも覚えておこうとやってみた。

Webpackとは

Node.jsで動くビルドツール。タスクランナー、開発ウェブサーバーとしても機能もある。
最近はGulpやGruntからWebpackに移行している流れ。


公式のチュートリアルをやる

まずは大人しく公式のチュートリアルをやってみる（読んだだけでやった気にならない）。


lessファイルをビルド

チュートリアルのディレクトリで作業する。
Lessファイルを作成
$ mkdir less
$ cd less
$ vi variables.less
@red: #ff0000;
$ vi main.less
@import "./variables";
body {
  background-color: @red;
}
公式に従いless-loaderをインストール（参考：less-loader | webpack）
$ npm install less-loader --save-dev

必要なモジュールをインストール
$ npm install less style-loader css-loader --save-dev

設定変更
$ vi webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader', // creates style nodes from JS strings
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
    ],
  }
};
$ vi index.js
import '../less/main.less';
import _ from 'lodash';
function component() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

実行してみる。
$ npm run build

main.jsに埋め込んで出力される。

cssは分けて出力したいので、対応するプラグインをインストール（参考：【webpack 4】環境構築からJSとCSSを別出力まで（備忘録） ｜ expexp.jp） 。
$ npm install mini-css-extract-plugin --save-dev

使わないstyle-loaderは削除
$ npm uninstall style-loader --save-dev

設定変更
$ vi webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.css',
    })
  ]
};

ビルド実行
$ npm run build

minifyするときはoptimize-css-assets-webpack-pluginを使うらしい。
これだけだとjavascriptがminifyしなくなったので、公式サイト通りに両方インストールする。
$ npm install --save-dev terser-webpack-plugin optimize-css-assets-webpack-plugin
$ vi webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
    ],
  },
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.css',
    })
  ]
};

遅くない？
こんなもの？
ひとまず試したかったのはできた。


【関連記事】