Verwendung von ExtractTextPlugin mit WebPack 2.2.0 RC3 wirft Fehler

Question

Ich versuche, eine AngularJS (Angular 1) -Anwendung mit WebPack 2.1.0 Beta 8 auf WebPack 2.2.0 RC3 zu aktualisieren, aber ich habe Probleme mit dem ExtractTextPlugin.

ich aus der folgenden gestartet, arbeiten, Setup:

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

Die Versionen in meiner package.json dafür verwendet werden, sind:

• "css-loader": „^ 0.23.1 "
• "weniger-loader": "^ 2.2.2"
• "postcss-loader": "^ 0.9.1"
• "style-loader": "^ 0.13.0",
• "Extrakt-Text-webpack-Plugin": "^ 1.0.1"
• "webpack": "2.1.0-beta.8"

Meine webpack Config hat ein paar andere Ladern und Plugins , aber ich habe derzeit nur Probleme mit dem ExtractTextPlugin. Nach meinem Setup aktualisieren, landete ich mit dem folgenden Code auf:

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

Diese Konfiguration die folgenden Versionen verwendet:

• "css-loader": "^ 0.26.1"
• „weniger -Loader ": "^ 2.2.3"
• "postcss-loader": "^ 1.2.1"
• "style-loader": "^ 0.13.1"
• " extract-text-webpack- plugin ":" 2.0.0-beta.4 "
• "webpack": "2.2.0-rc.3"

der obigen Konfiguration führt zu den folgenden Ausnahmen:

ERROR in ./src/index.less Modul Parse fehlgeschlagen: D: ... \ Knoten_Module \ Extract-Text-Webpack-Plugin \ Loader.js? {"Weglassen": 0, "Entfernen": True}! Stil-Loader! Css-Loader! Postcss-Loader! Less-Loader ! D: ... \ src \ index.less Unerwartetes Zeichen '@' (3: 0) Möglicherweise benötigen Sie einen geeigneten Loader, um den Dateityp zu verarbeiten. |/* 1. Importieren Sie Herstellerformate /| | @import './index.vendor.less'; | |/ 2. Import allgemeine Arten */@ ./src/index.ts 24: 0-23 @ Multi App

ERROR in ./~/animate.css/animate.css Modul analysieren fehlgeschlagen: D: ... \ node_modules \ animate.css \ animate.css Unerwartetes Zeichen '@' (1: 0) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. | @charset "UTF-8"; | |/*!

ERROR in ./~/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css Modul fehlgeschlagen analysieren: D: ... \ node_modules \ Bootstrap-Material-Datetime \ css \ Bootstrap-Material -Datenzeitpicker.css Unerwartetes Token (1: 0) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. | .dtp {Position: fixiert; oben: 0; links: 0; rechts: 0; unten: 0; Hintergrund: rgba (0, 0, 0, 0.4); Z-Index: 2000; Schriftgröße: 15px; -webkit-user-select: keine; -moz-user-select: keine; -ms-user-select: keine; Benutzerauswahl: keine; } | .dtp> .dtp-Inhalt {Hintergrund: #fff; maximale Breite: 300px; Kastenschatten: 0 2px 5px 0 rgba (0, 0, 0, 0,16), 0 2px 10px 0 rgba (0, 0, 0, 0,12); maximale Höhe: 520px; Position: relativ; links: 50%; } | .dtp> .dtp-Inhalt> .dtp-Datumsansicht> header.dtp-header {background: # 689F38; Farbe: #fff; Textausrichtung: Mitte; Auffüllen: 0.3em; }

Neben der oben Loader-Konfiguration habe ich versucht, auch die folgende Konfiguration, aber es hat weder nicht:

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

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

ich meine node_modules Ordner und installiert alles von Grund entfernt haben, aber das hat nicht geholfen.

Hinweis: Wenn ich die ExractTextPlugin-Konfiguration entferne und sie durch die folgenden Punkte ersetze, kann ich die Anwendung erfolgreich erstellen. Daher würde ich sagen, dass der Rest meiner Webpack-Konfiguration erfolgreich migriert wurde!

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

ich eine Probe hochgeladen haben, das Problem zu reproduzieren: https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip

Schritte zum Reproduzieren:

• npm installieren
• node_modules \ bin \ webpack.cmd --config conf \ webpack.conf.js

Ich habe auch als hinzugefügt econd Konfigurationsdatei, die funktioniert, ohne ExtractTextPlugin:

• node_modules \ bin \ webpack.cmd --config conf \ webpack.conf2.js

Jede Führung in dem, was ich bin fehlt hier geschätzt!

Vielen Dank im Voraus.

Answer 1

Es schien ein Problem mit ExtractWebpackPlugin zu sein und sollte mit der neuesten Version behoben worden sein: https://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5.

verifiziert ich mein reproduce App oben erwähnt arbeitet, wenn in meiner webpack.config Datei ETP zu beta5 mit folgenden Syntax eines Upgrade:

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

Aswell als die folgenden Syntax

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