react.js - 如何在Craco中配置多个项目入口?

Question

craco 配置多项目入口！

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

如：

public    index.html    demo.htmlsrc    index.js    entry        demo.js

构建完是

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

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

craro：7.1.0
react-scripts： 5.0.1
webpack: 5.88.2

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

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

Answer 1

就按照webpack的多入口配置就行了，网上蛮多webpack配置示例的。

// craco.config.jsmodule.exports = {  webpack: {    configure: {      entry: {        main: './path/to/my/entry/file.js',        demo: './path/to/my/entry/file.js'      },    },  },};

https://craco.js.org/docs/configuration/getting-started/#conf...

Answer 2

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

已解决

Answer 3

要在Craco中配置多个项目入口，你需要修改Webpack的配置。Craco允许你覆盖或扩展Create React App的默认Webpack配置。

以下是一个基本的步骤指南，用于在Craco中配置多个入口点：

1. 安装Craco（如果尚未安装）：

如果你还没有安装Craco，首先需要通过npm或yarn将其添加到你的项目中：

npm install @craco/craco# 或者yarn add @craco/craco

2. 修改package.json文件：

在你的项目根目录的package.json文件中，将"scripts"部分中的"start"和"build"命令替换为使用Craco：

"scripts": {  "start": "craco start",  "build": "craco build",  "test": "craco test",  "eject": "react-scripts eject"}

3. 创建或修改craco.config.js文件：

在你的项目根目录中，创建一个名为craco.config.js的文件（如果尚未存在）。然后，你可以在这个文件中扩展或覆盖默认的Webpack配置。

对于多个入口点，你可以这样做：

const path = require('path');module.exports = {  webpack: {    alias: {}, // 可以在这里配置别名    plugins: [], // 可以在这里添加插件    configure: {      // 提供webpack配置对象的修改      optimization: {        splitChunks: {          cacheGroups: {            vendor: {              test: /[\\/]node_modules[\\/]/,              name(module) {                // 获取模块名称。对于npm，它通常是名称@版本                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];                // npm包名称                return `npm.${packageName.replace('@', '')}`;              },            },          },        },      },      entry: {        main: './src/index.js',        demo: './src/entry/demo.js',      },      output: {        filename: '[name].bundle.js',        path: path.resolve(__dirname, 'build'),        publicPath: '/',      },      plugins: [        // 在这里添加或覆盖插件配置      ],    },  },};

这个配置示例中，我们添加了两个入口点：main和demo，分别对应src/index.js和src/entry/demo.js。同时，我们还配置了输出路径和文件名。

注意：确保你的HTML文件（index.html和demo.html）中的脚本引用与构建后的文件名相匹配。

4. 配置HTMLWebpackPlugin：

如果你想为每个入口点生成一个单独的HTML文件，你还需要配置HtmlWebpackPlugin。你可以在craco.config.js中的webpack.configure对象里添加或修改这个插件的配置。

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  // ... 其他配置  webpack: {    configure: {      // ... 其他配置      plugins: [        new HtmlWebpackPlugin({          template: './public/index.html',          filename: 'index.html',          chunks: ['main'], // 对应的entry名称        }),        new HtmlWebpackPlugin({          template: './public/demo.html',          filename: 'demo.html',          chunks: ['demo'], // 对应的entry名称        }),        // ... 其他插件      ],    },  },};

这个配置将为每个入口点生成一个单独的HTML文件，并包含相应的脚本引用。

请根据你的具体需求调整这些配置。这只是一个基本的指南，可能需要根据你的项目结构和需求进行进一步的调整。