Webpack4 с использованием SplitChunksPlugin с реагирующим приложением. Как разделить блоки на разные выходные папки?

Привет сообщество переполнения стека,

Подробности проекта:

Я работаю над веб-приложением, использующим реагирование и реагирование на приложение, чтобы настроить некоторые аспекты веб-пакета.

Я также использую библиотеку ant design css, которая, как известно, является большой библиотекой (и уже предоставляет фрагмент кода для импорта только необходимых материалов).

Мое приложение имеет 3 разных типа пользователей с разными вариантами использования. С точки зрения структуры папок это выглядит так:

src/components/
        MainLayout/
        LoginComponent/
        RegisterComponent/
        ... // Other global/shared components
        UserType1Components/
        UserType2Components/
        UserType3Components/

Текущий config-overrides.js:

const webpack = require('webpack')
const { override, fixBabelImports, addBabelPlugins, addLessLoader } = require('customize-cra')

const constants = require('./constants')

module.exports = {
  webpack (config, env) {
    //  Log current env
    console.log('Current env', env)

    //  Inject global vars
    config.plugins = (config.plugins || []).concat([new webpack.DefinePlugin({
      ...constants[env], ENV: `'${env}'`
    })])


    config = override(
      //  Inject lazy loading for ant design css
      fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      }),
      //  And override styles
      addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#3DBD7D',
          '@link-color': '#5678a4',
          '@success-color': '#3DBD7D',
          '@warning-color': '#ffaa00',
          '@error-color': '#E94A4C',
          '@border-color-base': '#3DBD7D',
          '@box-shadow-base' : 'none'
        }
      }),
      //  Inject translation
      ...addBabelPlugins('@lingui/babel-plugin-transform-js', '@lingui/babel-plugin-transform-react')
    )(config, env)

    //  Return the webpack config
    return config
  }
}

Текущая сгенерированная конфигурация веб-пакета:

{
  entry: ['./src/index.js'],
  output: {
    path: './build',
    pathinfo: false,
    filename: 'static/js/[name].[contenthash:8].js',
    futureEmitAssets: true,
    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
    publicPath: '/',
    devtoolModuleFilenameTemplate: [Function]
  },
  optimization: {
    minimize: true,
    minimizer: [[TerserPlugin], [OptimizeCssAssetsWebpackPlugin]],
    splitChunks: {chunks: 'all', name: false},
    runtimeChunk: true
  }
}

Что я хотел бы произвести:

На данный момент реагируем на сборку приложения следующим образом:

build/static/
        js/ // all chunks are here
        css/
        media/

И я хотел бы отделиться так:

At least:
build/static/
        js/
            userType1/
            userType2/
            userType3/
        css/
        media/

Best case:
build/static/
        userType1/
            js/
            css/
            media/
        userType2/
            js/
            css/
            media/
        userType3/
            js/
            css/
            media/

Я пытался использовать cacheGroups с участием test регулярное выражение для того, чтобы сделать это, но безуспешно.

Поэтому я спрашиваю вас, как я могу это реализовать?

Заранее спасибо за ваш дальнейший ответ.

1 ответ

Может быть, это может помочь вам. Указав точку входа, вы можете настроить таргетинг на папку dist в файле.

entry: {
  'build/app/bundle1': './src/app/bundle1.js', // will be  ./build/app/bundle1.js,
  'build/lib/bundle2': './src/lib/bundle2.js'// will be  ./build/lib/bundle2.js
},
output: {
  path: './',
  filename: '[name].js'
}
Другие вопросы по тегам