README.md

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