今回もGulpからwebpackへのフロントエンド開発環境に移行するケースについてまとめていきたいと思います。前回記事「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」では、webpackでSassのコンパイル環境を構築していきましたが、CSSに変換する際にはベンダープレフィックスの付与やminify化などの対応をするのが一般的かと思います。そこで今回はwebpackでベンダープレフィックスの付与やCSSのminifyを行なっていきたいと思います。   これらの機能を追加するにはPostCSSというものが必要なります、ここではPostCSSを使う方法で進めていきます。またwebpackの設定は、前回記事「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」の続きからコードを追加していく前提になっています。   また、SassのコンパイルにはTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。 【参考記事】 webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。今回はPostCSSを使うので、その本体とローダーに加えて、ベンダープレフィックスを追加する「autoprefixer」とCSSのminifyを行う「cssnano」も一緒にインストールします。

$ npm install --save-dev postcss postcss-loader autoprefixer cssnano

  インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】

{
  .......
  "devDependencies": {
    .......
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.2",
    "postcss": "^8.2.13",
    "postcss-loader": "^5.2.0",
  }
  .......
}

  それではwebpackの設定を行なっていきます。前回のSassをコンパイルするところの設定までは同じで、新たにPostCSSのローダー設定を追加するだけです。Sassのローダーを読み込んだ後にPostCSSのローダーを読み込んでいくという順番になります。ローダーのオプション設定で、「postcssOptions」を指定し、ここで今回の機能に必要となるプラグインである「autoprefixer」と「cssnano」を追加して設定を行います。 【webpack.config.js】

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const cssInline = false;
if(cssInline) {
  styleLoader = 'style-loader';
} else {
  styleLoader = { loader: MiniCssExtractPlugin.loader };
}
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          styleLoader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [ 'autoprefixer', { grid: true } ],
                  [ 'cssnano', { preset: 'default' } ]
                ]
              },
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'main.min.css' })
  ]
}

  その後にCSSのローダーと、styleのローダーを読み込んでいきますが、CSSのローダー設定のオプションで「importLoaders」の項目がありますが、ここではSassのローダーとPostCSSのローダーの2つを事前に読み込んでいるので2と設定しておきます。   そしてベンダープレフィックスを設定する際には、下記のように対象となるブラウザをpackage.jsonに「browserslist」のキーで指定しておく必要があります。これで準備は完了しました。 【package.json】

{
  .......
  "browserslist": [
    "last 2 version",
    "ie >= 11",
    "iOS >= 8.1",
    "Android >= 4.4"
  ],
  .......
}

  あとはこれまで同様、エントリーポイントになるスクリプトファイルでSassをインポートしてコンパイルを実行するだけですね。コンパイル後のCSSのソースコードを確認するとこのようにbrowserslistで設定した内容のベンダープレフィックスの付与とminify化が反映されているのが確認できます。  

---

  今回はベンダープレフィックスの付与とminify化を行いましたが、PostCSSを使うとこれ以外にもプロパティの順序の整理やメディアクエリーをまとめたりといろんなことができるようになります。Sassのコンパイル環境を構築する際には合わせて覚えておきたいですね。