Извлечение локальных и глобальных стилей с помощью mini-css-extract-plugin

Question

До сих пор я использовал extract-text-webpack-plugin и webpack 3 для создания двух файлов комплекта. Один для локальных стилей и один для глобальных стилей.

Таким образом, в файле глобальных стилей мы извлекаем css из начальной загрузки, семантики... и в локальный пакет стилей мы добавляем наши собственные стили.

Оба этих файла будут содержать хэш-содержимое, поэтому, если, например, я что-то изменю в своих локальных стилях и перестрою приложение, изменится только хэш из локальных стилей, а не из глобальных стилей.

После обновления до webpack 4 необходимо использовать mini-css-extract-plugin вместо extract-text-webpack-plugin.

Это была моя установка до сих пор. Я пробую разные вещи, но я не знаю, как включить эту настройку для 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,
   ...
  ],
}

Answer 1

Ваш css загрузчики верны.

В плагинах, я вижу, вы хотите реализовать это с помощью мини-CSS для извлечения нескольких CSS-файлов.

Хотя это определенно вариант, мне удалось реализовать его с опцией оптимизации веб-пакета, и только 1 мини-CSS в плагинах.

Конфигурация выхода:

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

Дополнительное правило CSS для стилей только из узловых модулей (я сделал это первым правилом CSS и после него дополнительными правилами):

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

Оптимизация конфигурации: (Это будет также извлекать JS поставщика.)

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

Конфигурация плагина:

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