CODEWITHSUNDEEP
styleschunkswebpack-4extracttextwebpackpluginmini-css-extract-plugin
Igor-Vuk
Igor-Vuk

Reputation: 3797

Extract local and global styles with mini-css-extract-plugin

Until now I have been using extract-text-webpack-plugin and webpack 3 to make two bundle files. One for local styles and one for gloabl styles.

So in global styles file we would extract css from like bootstrap, semantic ... and in local styles bundle we would put our own styles.

Both of those files would have contenthash so if for example I change something in my local styles and rebuild app, only the hash from local styles would change and not from globaly styles.

After updateing to webpack 4 a need to use mini-css-extract-plugin instead of extract-text-webpack-plugin.

This was my setup until now. I am trying different things but I dont know how to turn this setup for mini-css-extract-plugin?

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

const ExtractLocal = new ExtractTextPlugin({
  filename: 'stylesheet/stylesLocal.[contenthash].local.css',
  disable: false,
  allChunks: true,
})
const ExtractGlobal = new ExtractTextPlugin({
  filename: 'stylesheet/stylesGlobal.[contenthash].css',
  disable: false,
  allChunks: true,
})


module.exports = {
  module: {
    rules: [
      /* Local styles */
      {
        test: /\.local\.(css|scss)$/,
        use: ExtractLocal.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]___[name]__[hash:base64:5]',
              },
            },
           ...
          ],
        }),
      },
      /* Global styles */
      {
        test: /^((?!\.local).)+\.(css)$/,
        use: ExtractGlobal.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                minimize: true,
              },
            },
          ],
        }),
      },
    ],
  },
  plugins: [
    ExtractLocal,
    ExtractGlobal,
   ...
  ],
}

Upvotes: 1

Views: 2532

Answers (1)

yotke
yotke

Reputation: 1208

Your css loaders are correct.

In plugins, I see you want implement it using mini-css to extract multiple css files.

While it's definitely an options, I succeeded implementing it with webpack Optimization option, and only 1 mini-css in plugins.

Output config:

  output: {
    path: appConfig.paths.appBuild,
    filename: 'scripts/[name].[chunkhash:8].js',
    chunkFilename: 'scripts/[name].[chunkhash:8].chunk.js',
    publicPath: publicPath,
  },

Additional css rule for styles from node modules only (I made it the first css rule and after it the additional rules):

 {
    test: /\.(css|scss)$/,
    include: /(node_modules)/,
    use: [
      MiniCssExtractPlugin.loader,
      { loader: 'css-loader', options: { sourceMap: true } },
      { loader: 'sass-loader', options: { sourceMap: true } },
    ],
  },

Optimization config: (This will extract vendor js as well.)

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },

Plugin config:

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

Upvotes: 0

Related Questions