javascript - ExtractTextPlugin は単一のファイルでは機能しますが、ディレクトリでは機能しません

Question

私はwebpackが初めてで、作業環境をセットアップしようとしています。しかし、css ファイルと js ファイルを分離しようとしたときに、この問題に遭遇しました。

extract-text-webpack-plugin が意図したとおりに機能していません。

私のディレクトリ構造は次のとおりです。

---

アプリ --> css --> (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/app/css/dir1 in /Users/john-3139/Documents/working/wepack1 @マルチスタイル1

マルチ スタイル 1 のエラー モジュールが見つかりません: エラー: 'ファイル' または 'ディレクトリ' を解決できません /Users/john-3139/Documents/working/wepack1/app/css/dir1 in /Users/john-3139/Documents/working/wepack1 @マルチスタイル1

各ディレクトリのcssファイルをstyle1.css、style2.cssとして個別のcssファイルにするつもりです

ここで何が間違っていますか？