Craco、webpack 和库创建

Question

我正在创建一个小型的 Reactjs 应用程序，它最终将生成一个 .js 文件（它基本上是一个聊天机器人前端应用程序，与后端通信）。我使用创建了一个反应应用程序npx create-react-app，并且我设计的一切都没有问题。

此外，我还创建了一个webpack强大的概念证明来生成 js 文件，这也很有效。长话短说，这都是关于在webpack.config.js文件中指定输出：

output: {

        path: path.resolve(__dirname, "public"),
        library: "StewieWidget",
        libraryTarget: "umd",
        umdNamedDefine: true,
        filename: "[name].js"
    }

现在，据我所知，生成的应用程序在底层使用了react-scripts，而不是显式地使用webpack。所以，我不知道如何让它“出现”并通过上面的配置。另外，在搜索 Google 时，我发现我可能会使用craco，这就是我所做的。阅读其配置后，我发现 webpack 文档可能可以这样注入：

const path = require('path');


module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.entry = {
                "mylib": './src/index.js'
            }

            webpackConfig.output = {
                path: path.resolve(__dirname, "public"),
                library: "mylib",
                libraryTarget: "umd",
                umdNamedDefine: true,
                filename: "[name].js"
            }
            console.log(webpackConfig);
            return webpackConfig;
        }
    },
    devServer: {
        port: 3000,
        open: false
    }
}

这显然不起作用，如果我启动应用程序，npm run start --verbose我会看到它像这样挂起：

这不是很有帮助。该start命令只是执行craco start。

所以，我的问题是：

1. craco che 是处理这个问题的最佳方法吗？
2. 我应该直接使用 webpack 吗？如果是这样，对于我需要做的事情有什么好的教程（作为后端开发人员，webpack 始终是一个棘手的话题）

感谢帮助 ！

Answer 1

如果您想webpack.config.js在使用 craco 创建的 React 项目中进行修改npx create-react-app，这是一个很好的解决方案https://www.npmjs.com/package/@craco/craco。

安装后你需要更换你的一些线路package.json

从

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

到

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
...

之后，在您的根项目中添加一个名为craco.config.js

在文件内，您可以添加所需的代码..这里只是我craco.config.js通常使用的文件的示例（我添加了其他可选插件，例如craco-alias和craco-plugin-scoped-css..您不需要它们，这只是一个示例）..

module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css'),
    },
    {
      plugin: require("craco-alias"),
      options: {
        source: "options",
        baseUrl: "./",
        aliases: {
          "@components": "./src/components",
          "@context": "./src/context",
          "@utils": "./src/utils"
        }
      }
    }
  ],
  webpack: {
    configure: {
      resolve: {
        fallback: {
          path: require.resolve("path-browserify"),
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        },
      },
    },
    configure: {
      output: {
        publicPath: 'myAppUrl/'
      }
    }
  }
}