0

Im new to webpack and I've been trying to setup a working environment. But when I tried to separate the css and js files I came across this issue.

The extract-text-webpack-plugin is not working as intented.

My directory structure is as follows:


app --> css --> (dir1,dir2)


my webpack config is as follows

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);

my external config is as follows

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']
   })
  ]
 };
}

The error that I'm getting is as follows

ERROR in multi style1 Module not found: Error: Cannot resolve 'file' or 'directory' /Users/john-3139/Documents/working/wepack1/app/css/dir1 in /Users/john-3139/Documents/working/wepack1 @ multi style1

ERROR in multi style1 Module not found: Error: Cannot resolve 'file' or 'directory' /Users/john-3139/Documents/working/wepack1/app/css/dir1 in /Users/john-3139/Documents/working/wepack1 @ multi style1

Im intending to produce each directories css files to be a separate css file as style1.css, style2.css

What am I doing wrong here?

John Peter
  • 441
  • 2
  • 13

0 Answers0