css-extract-plugin

css-extract-plugin

The concept (yet not implemented!)

The plugin extracts CSS into separate files and remove generated by webpack empty javascript files.

The purpose of this plugin is to do the same as these plugins:

• mini-css-extract-plugin
• webpack-remove-empty-scripts

This plugin is replacement of these two plugins, 2 in 1, do it more efficient and much faster.

The webpack-remove-empty-scripts plugin is a hard addon for the mini-css-extract-plugin to fix bug/feature in webpack. It needed extra CPU und RAM resources. Webpack built resources slower than could be, because must do needless steps which we can spare if do it at same steps in one plugin.

What do we have now

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    'styles': ['./styles.css']
  },
  plugins: [
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash:8].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader'
        ],
      },
    ],
  },
};

What will we have.

webpack.config.js

const CssExtractPlugin = require('css-extract-plugin');

module.exports = {
  entry: {
    'styles': ['./styles.css']
  },
  plugins: [
    new CssExtractPlugin({
      filename: '[name].[chunkhash:8].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          CssExtractPlugin.loader, 
          'css-loader'
        ],
      },
    ],
  },
};

Feel the difference.

The plugin css-extract-plugin will do same as mini-css-extract-plugin + webpack-remove-empty-scripts, but much faster.

Why?

• I will do this plugin for my projects.
• I will save build time.
• I know how do this plugin more efficient than these both.