webpack 2を使用してCSSファイル内のlessファイルを正常化するにはどうすればよいですか？

Question

webpack2で<style></style>の中のページのlessをコンパイルできます。少ないファイルをCSSファイルにコンパイルすることはできません。

webpack.config.js：

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var ENV = process.env.NODE_ENV; 
var port = '10101'; 

var commonAttr = ['common', 'markerFactory', 'sceneTransform', 'sparFactory', 'upload']; 
var vendorArr = []; 
for (var i = 0, l = commonAttr.length; i < l; i++) { 
    vendorArr.push(path.resolve(__dirname + '/script/common/', commonAttr[i] + '.js')) 
} 

var config = { 
    entry: { 
     vendor: vendorArr, 
     app: './script/app', 
    }, 
    output: { 
     path: path.resolve(__dirname, 'wds'), 
     filename: '[name].bundle.js', 
     publicPath: '/wds/' 
    }, 
    module: { 
     rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: 'babel-loader' 
     }, 
     // // this option will compile the less to css, and append style tag to the page 
     { 
      test: /\.less$/, 
      use: [ 
       "style-loader", 
       "css-loader", 
       "less-loader" 
      ] 
     }, 

     // I tried to split the css file into a indenpendent file, but it didn't work 
     { 
      test: /\.less$/, 
      use: { 
       loader: ExtractTextPlugin.extract({ 
        fallbackLoader: "style-loader", 
        loader: "css-loader!less-loader", 
       }) 
      } 
     }, 
     { 
      test: /\.html$/, 
      use: "handlebars-loader?helperDirs[]=" + __dirname + "/script/helpers" 
     }] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('[name].bundle.css'), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "vendor", 
      filename: "vendor.js" 
     }) 
    ], 
    watchOptions: { 
     aggregateTimeout: 300, 
     poll: 1000 
    }, 
    devServer: { 
     compress: true, 
     // hot: true, 
     publicPath: '/wds/', //可访问的路径地址 
     port: port 
    } 
} 

if (ENV == 'development') { 
    config.devtool = 'inline-source-map'; // 将模块单独编译 成 单个文件 浏览器可调试 
} 
else { 
    config.devtool = 'eval-source-map'; // 将模块压缩一个文件一行 打包进bundle 
} 

var compiler = webpack(config); 

module.exports = config; 

しかし、それは、次のエラーが得られます。

は、私が使用していない場合をExtractTextPluginrulesuseloaderでそれは、スタイルタグをコンパイルすることができます。これはどこが間違っていますか？

Answer 1

申し訳ありませんが、私はそれを修正しました！

定義：

​​

モジュール：

rules:[{ 
      test: /\.less$/, 
      use: extractLESS.extract([ 'css-loader', 'less-loader' ]) 
     }] 

をプラグイン：

plugins: [ 
    extractLESS, 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     filename: "vendor.js" 
    }) 
],