なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2016/06/06

webpack で CSS を Minify したい

カテゴリー：

Node.js

webpack を使っていて、 CSS も Minify したい！って言う時のやり方。

npm install css-loader --save-dev した後に、css-loader?minimize と設定する。

実際だと、こんな感じかな。

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const root = path.join(__dirname, "./");

module.exports = [
  {
    entry: {
      bundle: [
        path.join(root, "assets/stylesheets/application.scss"),
        path.join(root, "assets/stylesheets/application.js"),
      ],
    },
    output: {
      path: path.join(root, "source/assets/css"),
      filename: "[name].css",
    },
    module: {
      loaders: [
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract(
            "style-loader",
            "css-loader?minimize"
          ),
        },
      ],
    },
    plugins: [new ExtractTextPlugin("[name].css")],
  },
];