Блог

У меня есть проект, который был создан с create-react-app помощью и был «извлечен». Для моего варианта использования мне нужно обновить конфигурацию Webpack, чтобы выводить файлы в ./build каталог в среде разработки, как это происходит в рабочей среде.

Я добавил devServer свойство в свою конфигурацию:

 devServer: {
    writeToDisk: true,
}
  

и я обновил output свойство, чтобы иметь a path в среде разработки:

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

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

Когда я запускаю yarn start , файлы в build каталог не записываются.

Что я должен делать по-другому?

Проблема в том, что create-react-app не настраивается webpack-dev-server с использованием devServer свойства config/webpack.config.js .

Вместо этого он использует webpack-dev-server непосредственно scripts/start.js следующий код:

 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) => {
    // ...
}
  

Другими словами, чтобы изменить поведение сервера разработки, вы должны обновлять config/webpackDevServer.config , а не устанавливать devServer свойство config/webpack.config.js .

В этом случае мне просто нужно было добавить writeToDisk свойство:

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

Это приведет к тому, что выходные файлы будут записываться ./dist по умолчанию. Чтобы установить другой каталог, все равно необходимо также обновить output.path в config/webpack.config.js :

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