--- title: Running Webpack and Webpack Dev Server localeTitle: Ejecutando Webpack y Webpack Dev Server --- Ha llegado el momento de utilizar Webpack. Debido a que Webpack se instala globalmente, podemos ejecutar lo siguiente en nuestro terminal: ``` webpack ``` Esto ejecutará nuestro archivo `webpack.config.js` . Debería ejecutarse con éxito, y deberíamos ver algo como esto aparecer en nuestro terminal: ``` Hash: 2474b15611d8d75c5a39 Version: webpack 1.12.14 Time: 1721ms Asset Size Chunks Chunk Names bundle.js 679 kB 0 emitted] main + 159 hidden modules ``` Tenga en cuenta que se refiere a un `Asset` llamado `bundle.js` . Webpack nos dice que este archivo se creó cuando `webpack` comando `webpack` . Revise su carpeta `dist` , y debería ver su `bundle.js` junto a su `index.html` . Nuestro árbol ahora se verá así: ``` . ├── dist | ├── bundle.js │ └── index.html ├── node_modules ├── package.json ├── src │ └── js │ └── client.js └── webpack.config.js ``` ¡Ahora que tenemos un `dist/bundle.js` , nuestro archivo `dist/index.html` ahora se refiere a un archivo que existe! Si echamos un vistazo a `bundle.js` , veremos que es un paquete de todos los archivos JavaScript en nuestro proyecto. ¡Guay! ¡Adelante, busca algunos contenidos de nuestro `dist/bundle.js` , como `This is one cool app!` . Podemos ver su contexto en el archivo, está dentro de un método de aspecto extraño: ``` _createClass(Main, [{ key: 'render', value: function render() { return _react2.default.createElement( 'div', null, _react2.default.createElement( 'h1', null, 'This is one cool app!' ) ); } }]); ``` Esto es lo que Babel ha hecho; ha convertido el código a ES5 y lo ha incluido en otros archivos JavaScript, incluidos todos nuestros módulos de nodo, por supuesto. Ahora, todos nuestros archivos React pueden referirse a este paquete utilizando las declaraciones de `import` ES6. Finalmente, es hora de revisar la aplicación en un navegador. Para esto, vamos a utilizar Webpack Dev Server, que es una herramienta rica en características que se utiliza para configurar un servidor `localhost` para propósitos de desarrollo cuando se usa Webpack. * \[Ayuda: Más sobre Webpack Dev Server Sigue adelante y corre: ``` webpack-dev-server --content-base dist ``` Necesitamos incluir `--content-base dist` para especificar una base de contenido para Webpack Dev Server, para que sepa dónde obtener los archivos; en este caso, es la carpeta `dist` , porque es la carpeta que estamos usando para la **producción** en lugar de la carpeta `src` , que estamos usando para el _desarrollo_ \*. En nuestra terminal, deberíamos ver algo como lo siguiente: ``` http://localhost:8080/webpack-dev-server/ webpack result is served from / content is served from /Code/react-webpack-example/dist Hash: 2474b15611d8d75c5a39 Version: webpack 1.12.14 Time: 3738ms ``` A continuación, encontrará una lista muy larga de todos los archivos empaquetados en `dist/bundle.js` por Webpack. ¡Asombroso! Ahora es el momento de dirigirse a la URL proporcionada por ese `webpack-dev-server` , `http://localhost:8080/` . Deberíamos ver una página con un `h1` que diga: ``` This is one cool app! ``` Revisemos el panel Elementos de nuestras Herramientas de desarrollo. Deberíamos tener lo siguiente: ``` React Webpack Example

This is one cool app!

``` Si esto es lo que escribimos en `src/js/client.js` , veremos cómo React se renderiza en `dist/index.html` . Si llegaste tan lejos, ¡bien hecho! Ahora ya sabe cómo configurar un espacio de trabajo con React, Webpack y el código ES6, lo que es increíble y le brinda el punto de partida para crear impresionantes aplicaciones web utilizando tecnologías de vanguardia. En el siguiente tutorial cubriremos algunos pasos más avanzados, que incluyen: * Entrando en más detalle con React * Mirando otras características interesantes de Webpack, como compilar archivos Sass * Usando minification en nuestro `dist/bundle.js` #### Más información: [Sitio web de webpack](https://webpack.js.org/) [Webpack Github](https://github.com/webpack/webpack) [webpack-dev-server Github](https://github.com/webpack/webpack-dev-server)