Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2021.05.29

webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う

Tags: ,,,,,

今回も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のコンパイル環境を構築する際には合わせて覚えておきたいですね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?