onde estão os arquivos e a configuração do webpack create-react-app?

172

Crio um projeto ReactJS com o create-react-apppacote e funcionou bem, mas não consigo encontrar arquivos e configurações do webpack.

Como o react-create-app funciona com o webpack? Onde estão os arquivos de configuração do webpack em uma instalação padrão create-react-app? Não consigo encontrar os arquivos de configuração nas pastas do meu projeto.

Eu não criei um arquivo de configuração de substituição. Posso gerenciar as definições de configuração com outros artigos, mas quero encontrar os arquivos de configuração convencionais.

Mohammad
fonte

Respostas:

96

Se você deseja encontrar arquivos e configurações do webpack, acesse o arquivo package.json e procure por scripts

img

Você descobrirá que o objeto scripts está usando uma biblioteca react-scripts

Agora vá para node_modules e procure a pasta react-scripts react -script-in-node-modules

Essa pasta react -scripts / scripts e react -scripts / config contém todas as configurações do webpack.

Vikram Thakur
fonte
1
Eu vi, mas não tenho reag-scripts dir #
Mohammad
4
Acabei de criar um aplicativo usando create-react-app e, no meu caso, há uma pasta react-scripts em node_modules. você pode compartilhar sua package.json
Vikram Thakur
5
Essa resposta não é mais correto , NPM agora é plana ou seja, todos os módulos estão na raiz node_modulesdiretório
vsync
4
A configuração Webpack real é aqui: github.com/facebook/create-react-app/blob/master/packages/...
protoEvangelion
O caso de uso mais comum seria personalizar a configuração do webpack do projeto. Mas se estiver no node_modules, ele será sobrescrito a cada instalação do npm, não é?
Blanc
59

A partir da documentação :

Você não precisa instalar ou configurar ferramentas como Webpack ou Babel. Eles são pré-configurados e ocultos para que você possa se concentrar no código.

Se você deseja ter acesso aos arquivos de configuração, é necessário ejetar executando:

npm run eject

Nota: esta é uma operação unidirecional. Depois de ejetar, você não pode voltar!

Na maioria dos cenários, é melhor não ejetar e tentar encontrar uma maneira de fazê-lo funcionar de outra maneira. Dessa forma, você pode atualizar suas dependências create-react-appe não precisar lidar com o inferno de dependências do Webpack.

klugjo
fonte
6
Eu sei que eles estão ocultos, mas eu quero saber onde eles estão e como o react-create-app lida com essa capacidade?
Mohammad
Então você provavelmente terá que olhar o código fonte. Não tenho a certeza
klugjo
2
@Mohammad checkout da fonte para 'reagir-scripts' você pode encontrar toda a configuração lá
Jose Munoz
1
Não responder à pergunta, mas me ajudou independentemente
Chicken Soup
32

Muitas pessoas acessam esta página com o objetivo de encontrar os arquivos e a configuração do webpack para adicionar sua própria configuração. Outra maneira de conseguir isso sem executar npm run ejecta execução é usar o react-app-rewired . Isso permite que você substitua seu arquivo de configuração do webpack sem ejetar.

jjbskir
fonte
6
Ainda é a solução preferida? Existe este aviso no projeto religado: github.com/timarney/react-app-rewired#rewire-your-app- : "A partir do Create React App 2.0, esse repositório é" levemente "mantido principalmente pela comunidade neste momento. .. Nota: Eu pessoalmente uso o next.js ou o Razzle, que oferecem suporte ao Webpack personalizado imediatamente. "
Anthony Kong
24

Supondo que você não deseja ejetar e você apenas deseja ver a configuração, você as encontrará em /node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`
vv1z
fonte
10

Você pode encontrá-lo dentro da pasta / config .

Quando você ejeta, você recebe uma mensagem como:

 Adding /config/webpack.config.dev.js to the project
 Adding /config/webpack.config.prod.js to the project
Alfrex92
fonte
7

A configuração do Webpack está sendo manipulada por react -scripts . Você pode encontrar toda a configuração do webpack em node_modules react -scripts / config .

E se você deseja personalizar a configuração do webpack, você pode seguir este customize-webpack-config

Hassan Ajaz
fonte
3

Tente ejetar os arquivos de configuração executando:

npm run eject

então você encontrará uma pasta de configuração criada em seu projeto. Você encontrará os arquivos de configuração do webpack init.

Vinayak humberi
fonte
0

Eu sei que é muito tarde, mas para futuras pessoas que se deparam com esse problema, se você quiser ter acesso à configuração do webpack do CRA, não há outra maneira, exceto que você precise executar:

$ npm run eject

No entanto, com a ejeção, você se desvia do pipeline de atualizações do CRA; portanto, do ponto de ejeção, é necessário mantê-lo.

Eu me deparei com esse problema muitas vezes e, portanto, criei um modelo para aplicativos de reação que têm a mesma configuração do CRA, mas também vantagens adicionais (como componentes estilizados, teste de unidade de brincadeira, Travis ci para implantações, mais bonito , ESLint, etc ...) para facilitar a manutenção. Confira o repo .

Humbledore
fonte