Webpack 4. Использование splitChunks для создания имен файлов динамического CSS, не определенных в точке входа - PullRequest
Новая
       20

Webpack 4. Использование splitChunks для создания имен файлов динамического CSS, не определенных в точке входа

0 голосов
/ 14 июня 2019

Я пытаюсь использовать webpacks splitChunks, чтобы добавить еще один файл css [grace.scss] в мой комплект.У меня есть одна точка входа js, которая создает js / main.js и css / main.css.Нам нужны темы, поэтому я также хотел бы связать файл grace.scss без создания другого файла js для него.Все мои исследования привели меня к мысли, что это возможно, но сейчас у меня две проблемы.Когда я пытаюсь создать имя файла css динамически с помощью splitChunks, я получаю файл css с именами 2.css и 2.css.map.Также я получаю файл js или оба 2.js и grace.scss.chunks.js

Я пробовал много разных путей, но не уверен, куда идти дальше.Буду очень признателен за любую вашу помощь.

Here is my current output

Что мне нужно, так это 

dist/
  css/
    grace.css
    frace.css.map
    main.css
    main.css.map
  js/
    main.js
    main.js.map

index.js 

import './css/style.scss';
import './css/themes/grace.scss';

webpack.config.js 

entry: {
    main: ['./index.js', './css/style.css']
},
output: {
    path: path.join(__dist, 'tri'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
},
optimization: {
    splitChunks: {
       cacheGroups: {
         style: {
           test: /[\\/]css[\\/](themes)[\\/]/,
           enforce: true,
           minSize: 10000,
           maxInitialRequests: 10,
           name (module) {
             let style
             if (typeof module.resource !== 'undefined') {
                style = module.resource.match(/[\\/]css[\\/]themes[\\/](.*?)([\\/]|$)/)[1]
             }
           return style
          }
       }
    }
  }
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    chunkFilename: 'css/[name].css'
  })
]
...