ExtractTextPlugin适用于单个文件，但不适用于目录

Question

我是webpack的新手，我一直在尝试设置一个工作环境。但是当我试图分离css和js文件时，我遇到了这个问题。

extract-text-webpack-plugin没有按预期工作。

我的目录结构如下：

  

app - ＆gt; css - ＆gt; （DIR1，DIR2）

我的webpack配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validator = require('webpack-validator');
const pkgJSON = require('./package.json');
const PATHS={
	app:path.join(__dirname,'app'),
	build:path.join(__dirname,'build'),
	style1:path.join(__dirname,'app','css','dir1'),
  	style2:path.join(__dirname,'app','css','dir1'),
};

//Common Configurations start
const common = {
	entry: {
		app:PATHS.app,
		style1:PATHS.style1,
      	style2:PATHS.style2,
	},
	output: {
		path: PATHS.build,
		filename: '[name].[hash].js',
		chunkFilename: '[name].[hash].js',
		sourceMapFilename: '[file].map'
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'WebpackDemo'
		})
	]
};
//Common Configurations end

//Config from libs/config.js
const extConfig = require('./libs/configs.js');

var config;
switch(process.env.npm_lifecycle_event){
	case 'build':
	config=merge(common,{});
	break;
	case 'dev':
	config=merge(common,extConfig.devServer({host:process.env.HOST,port:process.env.PORT}),
				extConfig.cssLoader([PATHS.style1,PATHS.style2]),{devtool:'eval-source-map'},
				extConfig.setFreeVariable('process.env.NODE_ENV','development'),
				extConfig.extractBundle({name:'vendor',entries:Object.keys(pkgJSON.dependencies)}));
	break;
	case 'prod':
	config=merge(common,extConfig.devServer({host:process.env.HOST,port:process.env.PORT}),
				extConfig.cssLoader([PATHS.style1,PATHS.style2]),{devtool:'source-map'},extConfig.minify(),
				extConfig.setFreeVariable('process.env.NODE_ENV','production'),
				extConfig.extractBundle({name:'vendor',entries:Object.keys(pkgJSON.dependencies)}));
	break;
	default:
	config=merge(common,{});
	break;
}
module.exports=validator(config);

我的外部配置如下

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
exports.devServer = function(options){
	return {
		devServer:{
			historyApiFallback:true,
			hot:true,
			inline:true,
			host:options.host,
			port:options.port
		},
		plugins:[
			new webpack.HotModuleReplacementPlugin({
				multiStep:true
			})
		]
	}
};

exports.cssLoader = function(paths){
	return{
		module:{
			loaders:[
				{
					test: /\.css$/,
					loader: ExtractTextPlugin.extract('css'),
					include: paths
				}
			]
		},
		plugins:[
			new ExtractTextPlugin('[name].[hash].css')
		]
	};
}

exports.minify = function(){
	return {
		plugins:[
			new webpack.optimize.UglifyJsPlugin({
				compress: {
					warnings : false,
					drop_console: true
				},
				mangle: {
					except: ['$'],
					screw_ie8: true,
					keep_fnames: true,
					except: ['webpackJsonp']
				},
				beautify: false,
				comments: false
			})
		]
	};
}

exports.setFreeVariable = function(key,value){
	const env={};
	env[key]=JSON.stringify(value);
	return{
		plugins:[
			new webpack.DefinePlugin(env)
		]
	};
}

exports.extractBundle = function(options){
	const entry = {}
	entry[options.name] = options.entries;

	return{
		entry:entry,
		plugins:[
			new webpack.optimize.CommonsChunkPlugin({
				names: [options.name,'manifest']
			})
		]
	};
}

我得到的错误如下

  

多风格的错误1   找不到模块：错误：无法解析/ Users / john-3139 / Documents / working / wepack1中的'file'或'directory'/ Users / john-3139 / Documents / working / wepack1 / app / css / dir1    @ multi style1

     

多风格的错误1   找不到模块：错误：无法解析/ Users / john-3139 / Documents / working / wepack1中的'file'或'directory'/ Users / john-3139 / Documents / working / wepack1 / app / css / dir1    @ multi style1

我打算将每个目录的css文件生成为一个单独的css文件，如style1.css，style2.css

我在这里做错了什么？