Webpack: How to save imported JS, CSS in different folders?

Question

webpack

There was such a problem. I'm on my second day learning Webpack after switching from Gulp/Grunt. I can’t figure out how to save, for example, a CSS file to a separate folder, and not where my bundle (JS file) is saved.

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var Webpack = require('webpack');
var path = require('path');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'dev/js/app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {

  entry: APP_PATH,
  output: {
    path: BUILD_PATH,
    publicPath: BUILD_PATH + '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/, 
        loader: "uglify!babel-loader"
      },
      { 
        test: /\.min\.css/,
        loader: ExtractTextPlugin.extract("css-loader")
      },
      {
        test: /\.styl$/,
        loader: ExtractTextPlugin.extract("css-loader!stylus-loader")
      }
    ]
  },
  plugins: [new ExtractTextPlugin("bundle.css")]
};

import {Test} from './classes/test'
import '../stylus/app.styl';

var test = new Test();

As a result, after running webpack, everything is saved to the /build folder . I'm using the Stylus preprocessor and everything works well. But, now I want to save these files separately, and not in one folder.
Some have advised using Webpack in conjunction with Gulp, but I think this is a perversion. Please advise a better solution.

Answer 1

Try like this:

loader: ExtractTextPlugin.extract('css-loader',{publicPath:'./css/'})