Question

你好堆栈溢出社区，

项目详细信息：

我正在使用react和react-app-rewired开发一个Web应用程序，以自定义Webpack的某些方面。

我还使用了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
  }
}

当前生成的Webpack配置：

{
  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的正则表达式一起使用，但这样做没有成功。

所以我问你，我该怎么实现？

预先感谢您的进一步答复。

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

Webpack4使用带有响应应用程序的SplitChunksPlugin，如何将块分成不同的输出文件夹？

1 个答案: