webpackにはJavaScriptのバンドルだけではなく、スタイルシート(CSSやSass)のバンドルもできます。スタイルシートに関してはベンダープレフィックスを付与したり、CSS自体をminifyするのが一般的でしょう。webpack単体ではその機能は存在しないので、PostCSSの機能を読み込んで実現します。

この記事では、その環境構築手順を最小構成で紹介します。

※この記事はwebpack 3.xをもとに解説しています。webpack 1.x系とは互換性がありませんのでご注意ください。

※webpackを利用するのは事前にNode.jsをインストールしておいてください。この記事では2018年2月現在最新のNode.js v9.0、npm 5.6で解説します。

※サンプルはGitHubで公開しています(webpackのサンプル)。ダウンロードして読み進めてください。

モジュールのインストール

コマンドラインで次のコマンドを入力ください。似たような名前のモジュールが多くて不安になりますが、最低限必要なものです。

npm i -D webpack style-loader css-loader sass-loader node-sass postcss-loader autoprefixer cssnano

インストールしたら、package.jsonサンプルのファイルと同じような内容となるはずです。

設定ファイル

続いて、webpack.config.jsファイルに次の設定を追記します。ソースマップを有効にしています。

module.exports = {
  entry: './src/main.js',
  output: { // ファイルの出力設定
    path: `${__dirname}/build`,  //  出力ファイルのディレクトリ名
    filename: 'bundle.js'  // 出力ファイル名
  },
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子
        test: /\.scss/,
        // Sassファイルの読み込みとコンパイル
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // オプションでCSS内のurl()メソッドの取り込みを禁止する
              url: false,
              // ソースマップを有効にする
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              // PostCSS側でもソースマップを有効にする
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
};

PostCSSの設定ファイル

続いて postcss.config.js ファイルを用意し次のように記載します。

module.exports = {
  plugins: [
    // ベンダープレフィックスを自動付与する
    require('autoprefixer')(),
    // CSSの余計な空白文字/改行を除去する
    require('cssnano')(),
  ],
};

以上で完成です。 コマンドラインを叩いて確認してみましょう。

npx webpack

まとめ

webpackは設定ファイルが複雑ですが、カスタマイズの自由度が大きいのが利点です。エンドユーザー/クライアントに最適なファイルを転送できるように、チューニングを怠らないにしましょう。

連載記事一覧

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.