Mi experiencia con Webpack

Que es ?

Básicamente Webpack es un empaquetador de Javascript.

Que podemos hacer con el ?

De todos nuestros archivos Javascript crea uno solo, esto es útil para desplegar en producción.

Puede configurarse como servidor de desarrollo en tiempo real, esto nos sirve para cada cambio que hagamos lo refleje el servidor.

Podemos empaquetar también archivos sass y less.

Y otras cosas que aun no he necesitado.

Para que lo puedo usar ?

Personalmente lo utilice para trabajar React.js pero puede combinarse bien con Angular o algún otro framework de Javascript.

Como instalarlo ?

$ npm install -g webpack

Después de instalarlo debemos crear un archivo de configuración, les comparto el mio:

module.exports = {
 resolve: {
    extensions: ['', '.js', '.jsx']
 },
 entry: './app.js', //cual es la entrada de nuestra aplicacion
 output: {
   path: 'build',
   filename: 'index.js',
   //publicPath: '/build/'
 },
 devServer: { // opciones para el servidor de desarrollo
   inline: true, // para que se recargue automáticamente cuando cambie un archivo
   contentBase: "build",
   port: 3333, // puerto donde funcionará el servidor
   historyApiFallback: true,
 },
 module: {
   loaders: [
     {
       test: /\.js$/, //probamos por la extensión .js
       exclude: /node_modules/, //no queremos procesar los archivos en node_modules
       loader: 'babel', //utilizamos babel
       query: { //cargamos los presets que instalamos
         presets: ['es2015', 'react']
       }
     }
   ]
 }
};

Para poder usar el servidor de desarrollo hay que agregar unas lineas a nuestro archivo packages.json

Instalación:

$ npm install --save-dev webpack-dev-server

Configuración:

{
  "name": "react_base",
  "version": "1.0.0",
  "description": "webpack server",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "mikko",
  "license": "ISC",
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "express": "^4.14.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }
}

Como arrancar el servidor de desarrollo?

$ npm start

Como general el empaquetado?

$ webpack --watch