Help us understand the problem. What is going on with this article?

ExtractTextPluginの使い方(webpack)

More than 3 years have passed since last update.

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

うまくいった。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした