Building both CSS and Javascript files with Webpack 1

Question

I am trying to output both a css as a js bundle file within my webpack.config file but I am facing two issues:

1) My output file has a .js extension but one of the output files needs to be a css file (scss.bundle.css). How would I make this work?

2) My loaders needs to be linked to the correct output file, and I don't think that is properly working right now.

Please let me know if you are able to help me here. There is quite limited knowledge on webpack I think.

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: "", // directory we currently in
    devtool: debug ? "inline-sourcemap" : null,
    entry: {
        client: "./js/client.js",
        scss: "./css/compactview.scss"
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].bundle.js' // when out putting we create this kind of file
    },
    module: {
        loaders: [
            {
                test: /\.js?$/, //anything thats a JS file gets run through babel-loader
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            },
            {
                test: /\.scss$/, // any scss files
                loaders: ['style', 'css', 'sass'],
                include:
            }
        ]
    },
    watch: true, //automatically watch files when running webpack
    plugins: debug ? [] : [ //if in debug mode, no plugins - if in production ..
        new webpack.optimize.HotModuleReplacementPlugin(),
        new webpack.optimize.DedupePlugin(), //strip out duplicate code
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), //gets rid of sourcemaps, comments, etc
    ],
};

Quotidian · Accepted Answer · 2016-10-11 13:17:21Z

1

Use the ExtractTextPlugin to pull the css out of the bundle and into a separate css file.

let ExtractTextPlugin = require('extract-text-webpack-plugin');

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
      {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

Note that the webpack 2 plugin is different.

answered Oct 11, 2016 at 13:17

Quotidian

2,9402 gold badges25 silver badges19 bronze badges

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

2 Comments

Arjenovic Over a year ago

@Quotidian I don't want to extract it from a bundle, I'd like to simply convert a .scss file to a .css file directly, without first adding it to some webpack javascript bundle and then extracting it from there.

Quotidian Over a year ago

Webpack bundles everything to preserve dependencies, which is why they provide the extract plugin. If you don't want that, then webpack is the wrong choice.

Collectives™ on Stack Overflow

Building both CSS and Javascript files with Webpack 1

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related