webpack build less files output one css minify file

Question

Is webpack the tool that I need to pass several less files into one minified CSS file?
if so, I'm not sure what I'm doing wrong in the code below?
Is there a way of outputting to different file paths, right now my js file outputs to './assets/javascripts/bundle/', I would like my css file to output to './assets/stylesheets/bundle/' , how would I do this?

Update
I did a test and I can build my less files to one css file but still can't find out how to set multiple paths for the output folder, now I have to comment out the js entry part and change output path...

webpack config

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

module.exports = {
  entry: {
    'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
    // stylesheets
    'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  },
  resolve: {
    alias: {
      jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
      "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
};

assets/stylesheets/Media/Index/Base.js

require('../../../Global/Config.less');
require('../../../Global/Fp.less');
require('../../../Global/Urb.less');
require('../../../Global/Ad1.less');
require('./Nav0.less');
require('./Index.less');
require('./Content.less');

Config.less

@color: 'red';

Index.less

body {
  background-color: @{color};
}

trekforever · Accepted Answer · 2015-09-09 20:30:11Z

6

You're almost there. Like you already did, you can get all your styling into one css file using ExtractTextPlugin. To put your js and css into a different directories, you can just define a path in ExtractTextPlugin or output.filename that is relative to your output.path. For example:

output: {
    path: './assets',
    filename: './javascripts/bundle/[name].js'
},
plugins: [
    new ExtractTextPlugin("./stylesheets/bundle/[name].css")
]

answered Sep 9, 2015 at 20:30

trekforever

3,93227 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1775888 Over a year ago

Thanks for reply, this work!! I'm wondering is it possible set css file name same as javascript file name, right now I have to add StyleSheet after file name at entry

Collectives™ on Stack Overflow

webpack build less files output one css minify file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related