如何使用webpack 2在css文件中分配較少的文件？

Question

我可以通過webpack2在<style></style>內的頁面上編譯較少的內容。但我無法將較少的文件編譯成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; 

但它提供了以下錯誤：

如果我不使用ExtractTextPlugin在rulesuseloader ，它可以編譯爲樣式標籤。這是怎麼回事？

Answer 1

對不起，我修好了！

定義：

​​

模塊：

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

插件：

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