Browse Source

Update webpack according to brand guidelines (#9595)

* Update webpack according to brand guidelines

* Change all ocurrences to webpack
main
Fernando Montoya 8 years ago
committed by Brandon Dail
parent
commit
cde040d56c
  1. 2
      _posts/2015-02-18-react-conf-roundup-2015.md
  2. 6
      _posts/2015-03-30-community-roundup-26.md
  3. 2
      _posts/2015-08-13-reacteurope-roundup.md
  4. 4
      _posts/2016-07-22-create-apps-with-no-configuration.md
  5. 2
      _posts/2016-09-28-our-first-50000-stars.md
  6. 4
      contributing/codebase-overview.md
  7. 2
      docs/installation.md
  8. 8
      docs/optimizing-performance.md

2
_posts/2015-02-18-react-conf-roundup-2015.md

@ -24,7 +24,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<div class="skinny-col">
<h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
<p>
<strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
<strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
</p>
</div>
<div class="skinny-col">

6
_posts/2015-03-30-community-roundup-26.md

@ -75,11 +75,11 @@ Jay Garcia spent a lot of time during the beta working on a NES music player wit
</center>
## React Native with Babel and Webpack
## React Native with Babel and webpack
React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as Webpack and Babel. The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase.
React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as webpack and Babel. The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase.
Roman Liutikov found a way to [use Webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript

2
_posts/2015-08-13-reacteurope-roundup.md

@ -47,7 +47,7 @@ And there were lots of great talks from the React community:
* [Michael Chan](https://www.youtube.com/watch?v=ERB1TJBn32c&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=2) looks at how to solve problems like CSS theming and media queries with contexts and plain old JavaScript. He also looks at the role of container-components and when it's better to "just use CSS.".
* [Elie Rotenberg](https://www.youtube.com/watch?v=JSjhhUvB9DY&index=3&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) talks about Flux over the Wire, building isomorphic, real-time React apps using a novel interpretation of Flux.
* [Ryan Florence](https://www.youtube.com/watch?v=BF58ZJ1ZQxY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=6) says “Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!”.
* [Dan Abramov](https://www.youtube.com/watch?v=xsSnOQynTHs&index=7&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) demonstrates how React can be used together with Webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.
* [Dan Abramov](https://www.youtube.com/watch?v=xsSnOQynTHs&index=7&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) demonstrates how React can be used together with webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.
* [Mikhail Davydov](https://www.youtube.com/watch?v=ee_U2t-8L48&index=10&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) shows you how to ask the browser layout engine for help, how to avoid slavery of DSL, and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.
* [Kevin Robinson](https://www.youtube.com/watch?v=EOz4D_714R8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=3) shares how user experience choices are a primary influence on how Twitter design the data layer, especially for teams developing new products with full-stack capabilities.
* [Jed Watson](https://www.youtube.com/watch?v=ctwmd5L1U_Q&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=4) shares what Thinkmill have learned about React and mobile app development, and how they've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of their development process and framework.

4
_posts/2016-07-22-create-apps-with-no-configuration.md

@ -35,7 +35,7 @@ Run `npm start` to launch the development server. The browser will open automati
![compiled successfully](/react/img/blog/create-apps-with-no-configuration/compiled-successfully.png)
Create React App uses both Webpack and Babel under the hood.
Create React App uses both webpack and Babel under the hood.
The console output is tuned to be minimal to help you focus on the problems:
![failed to compile](/react/img/blog/create-apps-with-no-configuration/failed-to-compile.png)
@ -76,7 +76,7 @@ Your `package.json` contains only a single build dependency and a few scripts:
}
```
We take care of updating Babel, ESLint, and Webpack to stable compatible versions so you can update a single dependency to get them all.
We take care of updating Babel, ESLint, and webpack to stable compatible versions so you can update a single dependency to get them all.
### Zero Configuration

2
_posts/2016-09-28-our-first-50000-stars.md

@ -218,7 +218,7 @@ As the project was about to be open sourced, [Lee Byron](https://twitter.com/lee
In 2012, Instagram got acquired by Facebook. [Pete Hunt](https://twitter.com/floydophone), who was working on Facebook photos and videos at the time, joined their newly formed web team. He wanted to build their website completely in React, which was in stark contrast with the incremental adoption model that had been used at Facebook.
To make this happen, React had to be decoupled from Facebook's infrastructure, since Instagram didn't use any of it. This project acted as a forcing function to do the work needed to open source React. In the process, Pete also discovered and promoted a little project called Webpack. He also implemented the `renderToString` primitive which was needed to do server-side rendering.
To make this happen, React had to be decoupled from Facebook's infrastructure, since Instagram didn't use any of it. This project acted as a forcing function to do the work needed to open source React. In the process, Pete also discovered and promoted a little project called webpack. He also implemented the `renderToString` primitive which was needed to do server-side rendering.
As we started to prepare for the open source launch, [Maykel Loomans](https://twitter.com/miekd), a designer on Instagram, made a mock of what the website could look like. The header ended up defining the visual identity of React: its logo and the electric blue color!

4
contributing/codebase-overview.md

@ -46,7 +46,7 @@ React itself was extracted from Facebook's codebase and uses Haste for historica
* When you add a new file, make sure you include a [license header](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js#L1-L10). You can copy it from any existing file. A license header always includes [a line like this](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js#L9). Change it to match the name of the file you created.
* Don’t use relative paths when importing. Instead of `require('./setInnerHTML')`, write `require('setInnerHTML')`.
When we compile React for npm, a script copies all the modules into [a single flat directory called `lib`](https://unpkg.com/react@15/lib/) and prepends all `require()` paths with `./`. This way Node, Browserify, Webpack, and other tools can understand React build output without being aware of Haste.
When we compile React for npm, a script copies all the modules into [a single flat directory called `lib`](https://unpkg.com/react@15/lib/) and prepends all `require()` paths with `./`. This way Node, Browserify, webpack, and other tools can understand React build output without being aware of Haste.
**If you're reading React source on GitHub and want to jump to a file, press "t".**
@ -191,7 +191,7 @@ ReactRef.detachRefs = function(
}
```
When possible, new code should use Flow annotations.
When possible, new code should use Flow annotations.
You can run `npm run flow` locally to check your code with Flow.
### Classes and Mixins

2
docs/installation.md

@ -211,7 +211,7 @@ Learn [how to tell if your website is serving the right version of React](/react
* [Creating a Production Build with Brunch](/react/docs/optimizing-performance.html#brunch)
* [Creating a Production Build with Browserify](/react/docs/optimizing-performance.html#browserify)
* [Creating a Production Build with Rollup](/react/docs/optimizing-performance.html#rollup)
* [Creating a Production Build with Webpack](/react/docs/optimizing-performance.html#webpack)
* [Creating a Production Build with webpack](/react/docs/optimizing-performance.html#webpack)
### Using a CDN

8
docs/optimizing-performance.md

@ -138,14 +138,14 @@ For a complete setup example [see this gist](https://gist.github.com/Rich-Harris
Remember that you only need to do this for production builds. You shouldn't apply the `uglify` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
### Webpack
### webpack
>**Note:**
>
>If you're using Create React App, please follow [the instructions above](#create-react-app).<br>
>This section is only relevant if you configure Webpack directly.
>This section is only relevant if you configure webpack directly.
For the most efficient Webpack production build, make sure to include these plugins in your production configuration:
For the most efficient webpack production build, make sure to include these plugins in your production configuration:
```js
new webpack.DefinePlugin({
@ -156,7 +156,7 @@ new webpack.DefinePlugin({
new webpack.optimize.UglifyJsPlugin()
```
You can learn more about this in [Webpack documentation](https://webpack.js.org/guides/production-build/).
You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production-build/).
Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.

Loading…
Cancel
Save