ExtractTextPlugin не работает в webpack 2

Question

Я пытаюсь перенести свой webpack 1.x на 2.x, но он не работает с ExtractTextPlugin.

Моя WebPack версия 2.1.0-beta.28 и "Экстракт-текст-WebPack-плагин": "2.0.0-beta.4"

Вот мой webpack.config.js работает без ExtractTextPlugin :

var path = require('path') 
var webpack = require('webpack') 
var HappyPack = require('happypack') 
var BundleTracker = require('webpack-bundle-tracker') 
var path = require('path') 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 

function _path(p) { 
    return path.join(__dirname, p); 
} 

module.exports = { 

    context: __dirname, 
    entry: { 
     app: './assets/js/index', 
     vendor: ['jquery', 'moment'] 
    }, 

    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name].js' 
    }, 

    devtool: 'inline-eval-cheap-source-map', 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }), 
     new HappyPack({ 
      id: 'jsx', 
      threads: 4, 
      loaders: ["babel-loader"] 
     }), 
     // new ExtractTextPlugin({ 
     //  filename: "[name].css", 
     //  disable: false, 
     //  allChunks: true, 
     // }), 
     new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "vendor.js"}) 
    ], 

    module: { 
     rules: [ 

      { 
       test: /\.css$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       use: ["style-loader", "css-loader", "resolve-url-loader"] 
       // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader"]}) 
      }, 

      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"] 
       // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader", "sass-loader"]}) 
      }, 

      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, './assets/vendors/'), 
       use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"] 
       // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader", "sass-loader"]}) 
      }, 

      { 
       test: /\.jsx?$/, 
       include: path.resolve(__dirname, './assets/js/'), 
       exclude: /node_modules/, 
       use: ["happypack/loader?id=jsx"] 
      }, 
      { 
       test: /\.png$/, 
       use: { 
         loader: 'file-loader' , 
         options: { 
          name: '/static/img/[name].[ext]' 
         } 
        } 

      } 
     ] 
    }, 

    resolve: { 
     extensions: ['.js', '.jsx'], 
     modules: [ path.resolve(__dirname, 'node_modules')] 
    } 
} 

Так что, когда я бегу WebPack я получил эту ошибку: недопустимый объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API. - configuration.resolve имеет неизвестные свойства 'modulesDirectories'. Эти свойства действительны: объект {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, enforceExtension ?, enforceModuleExtension ?, extensions ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, modules ?, plugins ?, resolver ?, symlinks ?, unsafeCache? } - configuration.resolve.extensions [0] не должно быть пустым.

Answer 1

Я нашел решение:

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

const extractSass = new ExtractTextPlugin({ 
    filename: "[name].[contenthash].css", 
    disable: process.env.NODE_ENV === "development" 
}); 

module.exports = { 
    ... 
    module: { 
     rules: [{ 
      test: /\.scss$/, 
      loader: extractSass.extract({ 
       use: [{ 
        loader: "css-loader" 
       }, { 
        loader: "sass-loader" 
       }], 
       // use style-loader in development 
       fallback: "style-loader" 
      }) 
     }] 
    }, 
    plugins: [ 
     extractSass 
    ] 
}; 

для получения дополнительной информации перейдите по ссылке: https://www.npmjs.com/package/sass-loader