Какова цель chunkFilename модуля mini-css-extract-plugin? - PullRequest
Новая
       8

Какова цель chunkFilename модуля mini-css-extract-plugin?

0 голосов
/ 19 января 2019

Я сейчас использую модуль mini-css-extract-plugin, устанавливаю его значение chunkFilename и проверяю значение "[id].css", запустив его.Однако я не смог увидеть файл.

Ссылка ниже.

https://webpack.js.org/plugins/mini-css-extract-plugin/#minimal-example

Итак, мои вопросы:

Что такоеимя chunkFile для mini-css-extract-plugin?

Какова цель chunkFilename?

Как вы можете увидеть файл?

1 Ответ

0 голосов
/ 20 января 2019

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

Проверьте ниже несколько примеров (которые мне известны), которые могут создавать некоторые куски.

Пример 1 

// App.js
import './a.css';
import './b.css';
import './c.css';

//webpack.config.js
module.exports = {
  //... other configs
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: 'chunk-[id].css',
    })
  ]
}

Здесь мы просто получим в папке dist файл main.css, содержащий стили a,b,c.chunkFilename остается неиспользованным в этом сценарии.

Пример 2 

// App.js
import './a.css';
import ( /* webpackChunkName: "my-special-style" */ './b.css');
import './c.css';

//webpack.config.js
module.exports = {
  //... other configs
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: 'chunk-[id].css',
    })
  ]
}

В этой настройке теперь, когда мы используем async import, мы снова окажемся в папке dist сmain.css, который теперь содержит только a,c стилей и новый файл с именем chunk-my-special-style.css, который в основном b.css.Как вы понимаете, b.css теперь chunk, поэтому он имеет все возможности, которые предоставляет веб-пакет, например chunkFilename.

Пример 3 

// App.js
import './a.css';
import './b.css';
import './c.css';

//webpack.config.js
module.exports = {
  //... other configs
  module: {
    rules: [{
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'ultra-special-styles',
          test: /c\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: 'chunk-[id].css',
    })
  ]
}

В этой настройке сейчасМы используем конфигурацию splitChunks.Как следует из названия, у нас есть возможность создавать свои собственные чанки на основе некоторых условий (регулярные выражения, функции и т. Д.).Хотя эти файлы не будут импортированы асинхронно, очень важно использовать эти оптимизации, чтобы не раздуть наши файлы, будь то js или css.В этом примере мы окажемся в папке dist, снова с файлом main.css, который содержит a,b стилей и chunk-ultra-special-styles.css, который в основном c.css.Внутри опции splitChunks мы указываем имя чанка (как мы это сделали выше с комментарием) и регулярное выражение для соответствия желаемым файлам, которые должны быть в отдельном чанке / файле.Все остальное внутренне обрабатывается магией webpack и MiniCssExtractPlugin!

...