0

我是 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中的“文件”或“目录”/Users/john-3139/Documents/working/wepack1/app/css/dir1 @多风格1

找不到多样式1模块中的错误：错误：无法解析/Users/john-3139/Documents/working/wepack1中的“文件”或“目录”/Users/john-3139/Documents/working/wepack1/app/css/dir1 @多风格1

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

我在这里做错了什么？

4

0 回答 0