Style loader useable with extract-text-webpack-plugin

[charandas]

Can I use style-loader's useable feature with extract-text-webpack-plugins?

This doesn't work:

// Excerpt from webpack.config.js
module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                'style-loader/useable',
                'css-loader?sourceMap'
            ) }
    },
    plugins: [
        new ExtractTextPlugin('[name].css?[hash]-[chunkhash]-[name]', {
            disable: false,
            allChunks: true
        })
    ]
}

Fails at my first use of style.use().

[sokra]

That doesn't work, and makes no sense.

The useable API enables and disables styles on use and unuse. You cannot enable and disable the styles anymore when they are in a external stylesheet.

[charandas]

@sokra thanks for clearing that up.

Can you reiterate in a few words what this plugin does? The readme is quite terse at this point :)

[sokra]

It moves every require("style.css") in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file. If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.

Advantages:

• Fewer style tags (older IE has a limit)
• CSS SourceMap
• CSS requested in parallel
• CSS cached separate
• Faster runtime (less code and DOM operations)

Caveats:

• Additional HTTP request
• Longer compilation time
• Complexer configuration
• No runtime public path modification

[charandas]

That's nice and verbose. Perhaps, can be moved to the README.

Last question, when I include the bundled css, I do so directly in html. There is the customary /*# sourceMappingURL=bundle.js.map*/ at the end, however, chrome still shows me references to bundled css only.

Could I be missing something?

[charandas]

@sokra ping

[sokra]

You need to enable SourceMaps in devtools.

You need to use the devtool: "sourcemap" option.

in html you need something like <link rel="stylesheet" href="bundle.css">

[charandas]

Thanks! That brings up an interesting point. I removed my devtool: "sourcemap" option to make JS sourcemaps work with absolute paths in webstorm. It's starting to appear, I can choose only one or the other, but not both.

 new webpack.SourceMapDevToolPlugin(
            '[file].map', null,
            "[absolute-resource-path]", "[absolute-resource-path]")

Word?

[sokra]

devtool: "sourcemap" is just a shortcut for the SourceMapDevToolPlugin.

[charandas]

Thanks 👍