Webpack: extract css to its own bundle

Question

I'm using webpack on a project. I use style-loader so I can import "my.css".

The css gets bundled with the javascript and will be rendered in a <style> tag when component mount, ok.

However, I would like to keep that import syntax and make webpack build a css bundle for every entry point.

So webpack output should be [name].bundle.js AND [name].bundle.css. Is this something I can achieve ?

var config = {
  entry: {
    'admin': APP_DIR + '/admin.entry.jsx',
    'public': APP_DIR + '/public.entry.jsx'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  plugins: [],
  devtool: 'cheap-source-map',
  module: {
    loaders: [{
        test: /(\/index)?\.jsx?/,
        include: APP_DIR,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: ['./src/styles/constants.scss']
            },
          }
        ]
      }
    ],
  }
};

along with this babel.rc:

{
  "presets" : ["es2015", "react"],
  "plugins": ["transform-decorators-legacy", "babel-plugin-root-import"]
}

This may help you.

kemotoe
– kemotoe

2017-11-14 16:00:39 +00:00
Commented Nov 14, 2017 at 16:00 — kemotoe
– kemotoe, Commented Nov 14, 2017 at 16:00

albertfdp · Accepted Answer · 2017-11-14 17:13:11Z

1

Yes, you need to use extract-text-webpack-plugin. You might want to do it only on your production config. Config looks like this:

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //if you want to pass in options, you can do so:
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

answered Nov 14, 2017 at 17:13

albertfdp

4275 silver badges11 bronze badges

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

1 Comment

Apolo Over a year ago

Why would I want it only on prod config ?

Collectives™ on Stack Overflow

Webpack: extract css to its own bundle

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