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

Question

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,
   ...
  ],
}

yotke · Answer 1 · 2018-08-22T13:35:31.787

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',
}),

How is this working for you? I tried the same thing without success. In **output** I have this ``` output: { path: path.join(buildPath, 'dist'), filename: 'js/[name].[contenthash].js', chunkFilename: 'js/[name].[contenthash].js', publicPath: '/', }, ``` and if I use the rest of the config as you I will get only one .css bundle extracted twice as .css file in styles folder and once again inside .js folder as a .js file. — Igor-Vuk, Aug 21 '18 at 23:10
I got further by using stylesGlobal and stylesLocal inside of cacheGroups and extracting two .css files like I want but they are always extracted to js folder also, — Igor-Vuk, Aug 21 '18 at 23:10
I forgot to mention, you need a css rule for node_modules as well...updated answer — yotke, Aug 22 '18 at 13:33

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

1 Answers1