Как свернуть файл в файле css с помощью webpack 2?

Question

Я могу скомпилировать меньшее на странице в пределах <style></style> от webpack2. но я не могу скомпилировать меньше файлов в файл 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

Извините, я исправил его!

определяют:

var extractLESS = new ExtractTextPlugin('[name].bundle.css'); 

модуль:

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

плагин:

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