让 webpack 和 CRA 在 watch 模式下发出文件答案

【问题标题】：Making webpack and CRA emit files in watch mode让 webpack 和 CRA 在 watch 模式下发出文件
【发布时间】：2021-01-28 16:53:02
【问题描述】：

我正在尝试让CRA's start script 在更改时发出文件，而不是将它们保存在内存中。

我正在努力实现 Google Chrome 扩展，因此我需要将文件刷新到文件系统，以便 Chrome 可以提取它们。而且构建每个更改不如自动编译方便。

我尝试使用 react-app-rewired 覆盖 webpack 配置中的一堆 props，包括 mode、watch，并查看 'output.path' 但到目前为止没有运气。

或者 CRA 的“启动”脚本将永远不会发出底层代码，因为加载程序没有被调整为这样做？

感谢您的帮助！

【问题讨论】：

标签： webpack create-react-app

【解决方案1】：

你可能需要CRACO。

Create React App Configuration Override 是一个简单易懂的 create-react-app 配置层。

$ npm install @craco/craco --save

在根目录下创建craco.config.js文件并配置CRACO：

my-app
├── node_modules
├── craco.config.js
└── package.json

更新package.json：

/* package.json */

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

最后，编辑craco.config.js文件：

module.exports = {
  devServer: (devServerConfig) => {
    devServerConfig.writeToDisk = true;
    return devServerConfig;
  },
};

【讨论】：

谢谢你，尝试使用 craco，但我用 react-app-rewired 尝试了同样的想法，但它并没有完全奏效。
没有成功。 CRA 启动脚本只是不想做一些构建脚本所做的事情。最后，我取消了 CRA 并从头开始构建我的项目。对正在发生的事情有更多的控制，我总是可以查看 CRA 来挑选好的部分。
我通过直接配置 (github.com/gsoft-inc/craco/blob/master/packages/craco/…) 让它工作
这应该被标记为正确答案。

【解决方案2】：

我知道这个问题已经得到解答，是的，几个月前这对我也有用

但最近我开始了一个新项目，我想将一个 react 应用程序与 express 结合起来，我尝试使用相同的设置，但突然收到以下错误：

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'writeToDisk'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 1.

由于这个 QA 帮助了我，所以我决定将我在这里找到的内容分享给任何将来阅读本文并遇到相同错误的人。

解决方案

webpack 配置“devserver”结构似乎有一些变化，你可以在这里找到：https://webpack.js.org/configuration/dev-server/

您不能再直接使用 writeToDisk 并且需要将其放在 devMiddleware 对象中，如下所示：


    module.exports = {
        devServer: {
            devMiddleware: {
                writeToDisk: true,
            },
        },
        //...
    }

我正在使用：craco: ^6.4.3

希望对遇到和我一样问题的人有所帮助

【讨论】：