Verwendung von react-widgets-webpack mit extract-text-webpack-plugin für Webpack 2

Question

Wenn ich versuche, die instructions für die Verwendung von react-widgets-webpack mit extract-text-webpack-plugin und Webpack 2, I erhalten den folgenden Fehler:

ERROR in ./~/react-widgets-webpack/index.loader.js!./react-widgets.config.js Module build failed: Error: Breaking change: extract now only takes a single argument. Either an options object or the loader(s). Example: if your old code looked like this: ExtractTextPlugin.extract('style-loader', 'css-loader')

You would change it to: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })

Wechsel zu

styleLoader: require('extract-text-webpack-plugin').extract({ 
     fallback: "style-loader", 
     use: 'css-loader!less-loader' 
    }) 

gibt den folgenden Fehler:

ERROR in ./~/react-widgets-webpack/index.loader.js!./react-widgets.config.js Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '/Users/pbirmingham/Development/FLA/forks/flash/flash'

Mein webpack.config.js:

const webpack = require('webpack'); 
const globalizePlugin = require('globalize-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
     app: [ 
      'react-widgets-webpack!./react-widgets.config.js', 
      'bootstrap-loader', 
      './js/main.js'] 
    }, 
    output: { 
     path: './public/', 
     filename: 'js/bundle-[hash].js', 
    }, 
    module: { 
     rules: [ 
      {test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader'}, 
      {test: /\.json$/, use: 'json-loader'}, 
      { 
       test: /\.(css|scss)$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: "style-loader", 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
      { 
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       use: "url-loader?name=[name].[hash].[ext]&limit=10000&mimetype=application/font-woff" 
      }, 
      {test: /\.(ttf|eot|svg|gif)$/, use: "file-loader?name=[name].[hash].[ext]"}, 
      {test: /bootstrap.+\.(jsx|js)$/, use: 'imports-loader?jQuery=jquery,$=jquery,this=>window'} 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ filename: 'css/main.[contenthash].css'}), 
     new globalizePlugin({ 
      production: false, 
      developmentLocale: "en", 
      supportedLocales: ["en"], 
      output: "globalize-compiled-data-[locale].[hash].js" 
     }), 
     new HtmlWebpackPlugin({ 
      template: 'template/index.ejs', 
      chunks: ['app'] 
     }), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       NODE_ENV: JSON.stringify('production') 
      } 
     }) 
    ] 
} 

Hat jemand anderes dieses Verhalten gesehen?

Answer 1

Ich hatte das gleiche Problem. Legen Sie in package.json "extract-text-webpack-plugin": "~0.8.0" fest und definieren Sie dann ExtractTextPlugin loader wie loader: ExtractTextPlugin.extract('style', 'css!less')