WebPack 2.2.0でExtractTextPluginを使用するRC3でエラーが発生する

Question

WebPack 2.1.0ベータ8を使用してAngularJS（Angular 1）アプリケーションをWebPack 2.2.0 RC3にアップグレードしようとしていますが、ExtractTextPluginに問題があります。

私は、次の作業、セットアップから開始しました：このために私のpackage.jsonで使用されるバージョンである

module: { 
    ... 
    loaders: [{ 
    test: /\.(css|less)$/, 
    loaders: ExtractTextPlugin.extract('style', 'css!postcss!less') 
    }] 
    ... 
} 
, 
plugins: [ 
    new ExtractTextPlugin('styles/index-[contenthash].css') 
] 

：

• "CSS-ローダー"：「^ 0.23.1 「
• "あまりローダー"： "^ 2.2.2"
• "postcss-ロ​​ーダー"： "^ 0.9.1"
• "スタイル・ローダー"： "^ 0.13.0"、
• "エキス・テキストのWebPACK-プラグイン"： "^ 1.0.1"
• "のWebPACK"： "2.1.0-beta.8は"

私のWebPACKの設定は、いくつかの他のローダーとプラグインを持っていますしかし、私は現在、ExtractTextPluginの問題に直面しています。

• "CSS-ローダー"： "^ 0.26.1"
• 「あまりこの構成は、以下のバージョンを使用しています

  module: { 
      ... 
      rules: [{ 
      test: /\.(css|less)$/, 
      use: ExtractTextPlugin.extract(['css', 'postcss', 'less']) 
      }] 
      ... 
  } 
  , 
  plugins: [ 
      new ExtractTextPlugin('styles/index-[contenthash].css') 
  ] 
  

  ：私のセットアップをアップグレードした後、私は次のコードになってしまいました-loader "： "^ 2.2.3"

• "postcss-ロ​​ーダー"： "^ 1.2.1"
• "スタイル・ローダー"： "^ 0.13.1"
• " を抽出・テキストwebpack- 「プラグイン」：「2.0.0-beta.4」
• "のWebPACK"：以下の例外で、 "2.2.0-rc.3"

上記の構成の結果：

ERROR ./src/index.lessモジュールの解析では、失敗しました：D：... \ node_modules \ extract-text-webpack-plugin \ loader.js？{"omit"：0、 "remove"：true}！スタイルローダー！css-loader！postcss-loader！less-loader ！D：... \ src \ index.less 予期しない文字 '@'（3：0） に適切なローダーが必要な場合があります。 |/* 1.ベンダースタイルのインポート/| | @import './index.vendor.less'; | |/ 2.インポート一般的なスタイル*/@ ./src/index.ts 24：0-23マルチアプリ@

ERROR ./~/animate.css/animate.css モジュールでの解析に失敗しました：D： ... \ node_modules \ animate.css \ animate.css 予期しない文字 '@'（1：0） このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | @charset "UTF-8"; | |/*！

ERROR ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css モジュール内で障害が発生した解析：D：... \ node_modules \ブートストラップ・材料のDateTimePickerの\ CSSの\ブートストラップ材料を-datetimepicker。css 予期しないトークン（1：0） このファイルタイプを処理するには、適切なローダーが必要な場合があります。 | .dtp {位置：固定;トップ：0;左：0;右：0;下：0;バックグラウンド：rgba（0、0、0、0.4）; z-index：2000; font-size：15px; -webkit-user-select：none; -moz-user-select：なし; -ms-user-select：なし;ユーザー選択：なし; } | .dtp> .dtp-content {background：#fff;最大幅：300ピクセル。ボックスシャドー：0 2px 5px 0 rgba（0、0、0、0.16）、0 2px 10px 0 rgba（0、0、 0、0.12）;最大高さ：520px;ポジション：相対;左：50％; } | .dtp> .dtp-content> .dtp-date-view> header.dtp-header {background：＃689F38;色：#fff; text-align：center;パディング：0.3em; }

上記以外ローダー設定から、私はまた、次のような構成を試みたが、それはどちらも動作しませんでした：

use: ExtractTextPlugin.extract(['style-loader', 'css-loader', 'postcss-loader','less-loader']) 

use: ExtractTextPlugin.extract({ 
     fallbackLoader: "style-loader", 
     loader: "css-loader!less-loader" 
}) 

私はnode_modulesフォルダを削除し、インストールして、最初からすべてのものが、これは役に立たなかった。

注：ExractTextPluginの設定を削除し、それを次のものに置き換えると、アプリケーションが正常にビルドできるようになるので、残りのWebpack設定は正常に移行されました。

{ 
    test: /\.(css|less)$/, 
    use: [ 
     'style-loader', 
     'css-loader', 
     'postcss-loader', 
     'less-loader' 
    ] 
} 

私は問題を再現するためのサンプルをアップロードしました：

• をNPM
• node_modules \ .binファイル\ webpack.cmd --config をインストール：再現するhttps://dl.dropboxusercontent.com/u/87239305/webpack-less.zip

  手順をconf \ webpack.conf.js

私もExtractTextPluginなしで働いているecond設定ファイル、：

• node_modules \ .binファイル\ webpack.cmd --config confに\が何であるか、私はここに欠けているに

どれ指導をwebpack.conf2.js感謝！

ありがとうございます。

Answer 1

ExtractWebpackPluginに問題があるようで、最新のリリースで修正されているはずです：https://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5。

{ 
    test: /\.(css|less)$/, 
    loader: ExtractTextPlugin.extract({ 
     fallbackLoader: "style-loader", 
     loader: ["css-loader", "postcss-loader", "less-loader"] 
    }) 
},