Extract CSS in one file with Webpack 4

The goal of this repository is to demonstrate CSS the extraction of all styles into one CSS file with Webpack 4.

The CSS is extracted using one instance of mini-css-extract-plugin

Getting Started

npm install
npm run build

Webpack Config

The modules are loaded like this (see webpack.config.babel.js);

{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
},

Then the assets are generated by one instance of the plugins:

new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].css',
}),

The CSS is merged using the optimization.splitChunks.cacheGroups rule:

// Merge all the CSS into one file
styles: {
name: 'styles',
test: /\.s?css$/,
chunks: 'all',
enforce: true,
},

This outputs the following assets:

Hash: 58324b488358ee191231
Version: webpack 4.2.0
Time: 806ms
Built at: 2018-3-23 14:12:41
Asset Size Chunks Chunk Names
styles.css 93 bytes 0 [emitted] styles
styles.js 121 bytes 0 [emitted] styles
MyComponent.js 409 bytes 1 [emitted] MyComponent
vendors.js 96.8 KiB 2 [emitted] vendors
bundle.js 3.45 KiB 3 [emitted] bundle
index.html 358 bytes [emitted] Entrypoint bundle = vendors.js styles.css styles.js bundle.js