diff --git a/docs/docs/glossary/webpack.md b/docs/docs/glossary/webpack.md index dc65033b1..2838bc395 100644 --- a/docs/docs/glossary/webpack.md +++ b/docs/docs/glossary/webpack.md @@ -3,15 +3,15 @@ title: webpack disableTableOfContents: true --- -Learn what webpack is, how it works, and how Gatsby uses it to accelerate web site development. +Aprenda o que é webpack, como funciona, e como Gatsby o usa para acelerar o desenvolvimento de web sites. -## What is webpack? +## O que é webpack? -[webpack](/docs/glossary#webpack) is a static module bundler, or software that collects chunks or modules of JavaScript and compiles them into one or more optimized bundles. webpack is one of the core software packages that underpins Gatsby. +[webpack](/docs/glossary#webpack) é um gerador de módulos estático, ou um software que coleta _pedaços_ ou módulos do JavaScript e os compila em um pacote mais otimizado. webpack é um dos principais softwares de modularização que sustenta o Gatsby. -webpack works by creating a _dependency graph_. In other words, webpack determines which modules depend on other modules to make your site work. A _module_ is a chunk of code that encapsulates some functionality. It may be as small as a single JavaScript function, or it may be an entire library such as [React](/docs/glossary#react). +O webpack funciona criando um _gráfico de dependências_. Em outras palavras, o webapck determina qual módulo depende de outro para fazer seu site funcionar. Um _módulo_ é um conjunto de códigos que encapsula algumas funcionalidades. Pode ser tão pequeno quanto uma única função JavaScript ou pode ser uma biblioteca inteira como o [React](/docs/glossary#react). -webpack determines dependencies from the contents of `webpack.config.js`. `webpack.config.js` can contain one or more _entry points_, which tell webpack which file or files to use as the starting point (or points) for a dependency graph. See the following example. +O webpack determina dependências do conteúdo do `webpack.config.js`. `webpack.config.js` pode conter um ou mais _pontos de entrada_, no qual o webpack determina qual arquivo ou arquivos deve ser usado como ponto (ou pontos) de entrada para o gráfico de dependências. Veja o exemplo a seguir. ```javascript module.exports = { @@ -19,13 +19,13 @@ module.exports = { } ``` -webpack processes JavaScript and JSON files by default, but you can add support for CSS and media files with additional software and configuration. For example, Gatsby ships with its own [`webpack.config.js`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) file that supports [global CSS files](/docs/global-css/), [component-scoped CSS modules](/docs/css-modules/), and [CSS-in-JS](/docs/css-in-js/). +O webpack processa arquivos JavaScript e JSON por padrão, mas você pode adicionar suporte para CSS e arquivos de mídia com softwares e configurações adicionais. O Gatsby por exemplo, tem seu próprio [`webpack.config.js`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) que suporta [arquivos globais de CSS](/docs/global-css/), [módulos CSS _component-scoped_](/docs/css-modules/), e [CSS-in-JS](/docs/css-in-js/). -You can also use webpack to optimize how CSS and JavaScript are delivered to the browser. webpack supports a feature known as [_code splitting_](https://webpack.js.org/guides/code-splitting/). Code splitting allows you to divide your code across a few bundles that are loaded as needed or as requested. Gatsby is already configured to use this feature. You do not have to do any additional set up to reap the benefits. +Você também pode usar o webpack para otimizar como o CSS e o JavaScript são entregues ao navegador. O webpack suporta uma funcionalidade conhecida como [_code splitting_](https://webpack.js.org/guides/code-splitting/). _Code splitting_ permite que você divida seu código entre alguns pacotes que são carregados conforme são necessários ou requisitados. O Gatsby já está configurado para usar essa funcionalidade. Você não tem que fazer nenhuma configuração adicional para ter esses benefícios. -If you want to add support for features such as [Sass/SCSS](/docs/sass/), that Gatsby does not support out of the box, you can also [add a custom webpack configuration](/docs/add-custom-webpack-config/), or use one of the [Gatsby plugins](/docs/plugins/) contributed by the community. +Se você quiser adicionar suporte para funcionalidades como [Sass/SCSS](/docs/sass/), que o Gatsby não da suporte por padrão, você também pode [adicionar uma configuração customizada](/docs/add-custom-webpack-config/), ou usar um dos [plugins do Gatsby](/docs/plugins/) que são contribuições da comunidade. -### Learn more about webpack +### Aprenda mais sobre webpack -- [webpack](https://webpack.js.org/) official site -- [Custom Configuration](/docs/customization/) from the Gatsby Docs +- Site oficial do [webpack](https://webpack.js.org/) +- [Configuração customizada](/docs/customization/) da Documentação do Gatsby