読者です 読者をやめる 読者になる 読者になる

みかづきメモ

学習したことのメモとか、日記とか、備忘録。

webpack で CSS を Minify したい

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")
    ]
}];