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