ExtractTextPluginの使い方（webpack）

ExtractTextPluginでうまくいかなかったことがあったので

メモです。詳細なところまでは踏み込んでいません。

（2017.2.27 追記）この記事で扱っているwebpackのバージョンは1.14.0。webpack2ではちょっと使い方が違う模様。
https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change

ExtractTextPluginを使用し、本番環境ではhead内にスタイルを展開しないようにしようと試みていた。以下の様に設定していたけれど、失敗してしまっていた。

うまくいかなかった例

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [{
〜中略
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("stylesheets/style.css")
  ]
}]

こちらの設定で実行してみるとエラーがでる。

Module parse failed: 〜中略〜 Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

@import の@で躓いてるのかな… よくわからない。
次の行ではローダーが適切ではないようなことが指摘されている。

うまくいった例

以下のように設定を修正してみた。
相違点は、extractをクラスメソッドではなくインスタンス経由で実行したのと、cssをヘッダに展開する必要がないため style-loader を削除した。

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin')
  , extractTextPlugin = new ExtractTextPlugin('stylesheets/[name].css');

module.exports = {
  entry: {
    'index': [
      './src/javascripts/modules/main/indexmain.js'
    ],
    'others': [
      './src/javascripts/modules/main/othersmain.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'dist/assets/'),
    filename: "javascripts/[name].bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/},
      { test: /\.css$/, loader: extractTextPlugin.extract("css-loader")},
      { test: /\.scss$/, loader: extractTextPlugin.extract("css!sass")},
    ]
  },
  plugins: [
    extractTextPlugin
  ]
};

うまくいった。