使用 create-react-app 使 Webpack DevServer 在开发环境中写入磁盘

Question

我有一个使用 create-react-app 创建的项目，但已被“弹出”。对于我的用例，我需要更新 Webpack 配置以将文件输出到开发环境中的 ./build 目录，就像在生产环境中一样。

我在配置中添加了 devServer 属性：

devServer: {
    writeToDisk: true,
}

我更新了 output 属性在开发环境中有一个 path:

// I changed this:
output: {
    path: isEnvProduction ? paths.appBuild : undefined,
    ...
}

// To this:
output: {
    path: paths.appBuild,
    ...
}

当我运行yarn start时，没有文件写入build目录。

我应该怎么做？

Answer 1

问题是 create-react-app 没有使用 config/webpack.config.js 的 devServer 属性设置 webpack-dev-server。

相反，它直接在 scripts/start.js 中使用 webpack-dev-server，代码如下：

const createDevServerConfig = require("../config/webpackDevServer.config");

// ...

const serverConfig = createDevServerConfig(
    proxyConfig,
    urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, (err) => {
    // ...
}

换句话说，要改变 DevServer 的行为，您应该更新 config/webpackDevServer.config 而不是在 config/webpack.config.js 中设置 devServer 属性。

在这种情况下，我只需要添加 writeToDisk 属性:

module.exports = function (proxy, allowedHost) {
    return {
        writeToDisk: true,
        //...
    }
}

这将导致输出文件默认写入 ./dist。要设置不同的目录，仍然需要在 config/webpack.config.js 中更新 output.path:

output: {
    path: paths.appBuild,
    ...
}

使用 create-react-app 使 Webpack DevServer 在开发环境中写入磁盘

Make Webpack DevServer write to disk in development environment with `create-react-app`'s

webpack

webpack-dev-server

create-react-app