如何在Craco中配置多个项目入口?

站长

2024年06月20日 08:45 · 阅读数 20

craco 配置多项目入口！

需求如下：在原有的项目中增加一个单独的html页面，想构建成两个不同的项目入口文件，

如：

public
    index.html
    demo.html
src
    index.js
    entry
        demo.js

构建完是

build
    index.html
    demo.html
    static
        js
            main.xxx.js
            demo.xxx.js

但是有各自的js引用文件，又有公共的第三方库；

craro：7.1.0react-scripts： 5.0.1webpack: 5.88.2

已经尝试使用customize-cra + react-app-rewire-multiple-entry 实现，并且效果符合预期

现在请教大佬们使用craco 进行显示

1个回答

test

2024-06-20

const CracoLessPlugin = require('craco-less')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
    },
  ],
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.entry = {
        main: path.resolve(__dirname, './src/index.tsx'),
        activetion: path.resolve(__dirname, './src/entries/demo/index.tsx'),
      }
      webpackConfig.output = {
        ...webpackConfig.output,
        filename: 'static/js/[name].[contenthash:8].js',
        chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
      }
      webpackConfig.plugins.forEach((plugin) => {
        if (plugin.constructor.name === 'HtmlWebpackPlugin') {
          plugin.userOptions.excludeChunks = ['demo']
        }
      })
      webpackConfig.plugins.push(
        new HtmlWebpackPlugin({
          inject: true,
          template: path.resolve(__dirname, './public/demo.html'),
          chunks: ['demo'],
          filename: 'demo.html',
        }),
      )

      return webpackConfig
    },
  },
}

已解决

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容