Craco，webpack 和圖書館創建

Question

我正在創建一個小的 reactjs 應用程序，它最終會生成一個 single.js 文件（它基本上是一個與后端對話的聊天機器人前端應用程序）。 我使用npx create-react-app創建了一個 React 應用程序，並且我設計的一切都沒有問題。

我還創建了一個由webpack提供支持的概念證明來生成 js 文件，這也很有效。 長話短說，就是在webpack.config.js文件中指定 output：

output: {

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

現在，據我所知，生成的應用程序在幕后使用反應腳本，而不是明確地使用 webpack。 所以，我不知道如何讓它“出現”並通過上面的配置。 此外，在谷歌上挖掘時，我發現我可能會使用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. 我應該 go 直上 webpack 用法嗎？ 如果是這樣，什么是我需要做的事情的好教程（作為后端開發人員，webpack 一直是一個棘手的話題）

感謝幫助 ！

Answer 1

如果您想在使用 npx npx create-react-app React 項目中修改webpack.config.js ，craco 是一個很好的解決方案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/'
      }
    }
  }
}