Webpack

December 2, 2018 • ☕️ 4 minutos de lectura

Para cada página debería crearme un entry y llamarlo dinámicamente con [name]

Primero necesitamos tener instalado nodejs y npm.

npm install --save-dev webpack

Añadirmos a package.json en scripts

"build": "webpack index.js bundle.js"

recuerda para ejecutarlo npm run build

Ahora creamos un fichero llamado webpack.config.js

module.exports = {
  entry:./index.js',
  output: {
    filename: 'bundle.js'
  }
}

y volvemos a editar package.json y añadimos un nuevo script

“build:external”: “webpack —config ./external/webpack.config.js ”

Ahora si queremos exportar el bundle.js a otro directorio debemos hacer.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

npm install style-loader css-loader --save-dev

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // Aquí van los loaders
      {
        // test: que tipo de archivo quiero reconocer
        // use: que loader se va a encargar del archivo
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ],
      }
    ]
  }
}

Si queremos que los css salgan aparte, debemos instalar el siguiente plugin

npm install --save-dev extract-text-webpack-plugin

Este debemos importarlo en el webpack.config.js como una constante

const ExtractTextPlugin = require('extract-text-webpack-plugin')

Para ponerle un nombre podemos cambiar [name].css por lo que queramos, si no nos creará un main.css new ExtractTextPlugin("css/[name].css")

quedando el archivo así:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // Aquí van los loaders
      {
        // test: que tipo de archivo quiero reconocer
        // use: que loader se va a encargar del archivo
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          // [ 'style-loader', 'css-loader' ]
          fallback: 'style-loader',
          use: "css-loader"
        }),
      }
    ]
  },
  plugins: [
    // aquí van los plugins
    new ExtractTextPlugin("css/[name].css")
    // new ExtractTextPlugin("css/styles.css")
  ]
}

SERVIDOR DEV (SE ACTUALIZAN SOLOS LOS FICHEROS)

Es tan simple como añadir el flag --watch

"build:dev": "webpack --config ./webpack-dev-server/webpack.config.js --watch"

Si querenos no tener que refrescar el navegador, podemos utilizar un plugin.

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

Una vez instalado, volvemos a modificar el package.json usando webpack-dev-server en vez de webpack

"build:dev": "webpack-dev-server --config ./webpack-dev-server/webpack.config.js"

ejecutamos en la terminal

npm run build:dev

Nos devolverá algo similar a

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 3933d45d3cd1ec507632
Version: webpack 3.8.1

Los ficheros se guardan en http://localhost:8080/ ahora debemos modificar los html y referenciar dichos archivos.

INSTALAR UN LOADER COMO BABEL

https://github.com/babel/babel-loader

Editamos nuestro package.json y añadimos un nuevo script. "build:babel": "webpack-dev-server --config ./babel-loader/webpack.config.js"

instalamos las dependencias de npm para babel-loader npm install babel-loader babel-core babel-preset-env webpack

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // Aquí van los loaders
      {
        // test: que tipo de archivo quiero reconocer
        // use: que loader se va a encargar del archivo
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        // test: que tipo de archivo quiero reconocer
        // use: que loader se va a encargar del archivo
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          // [ 'style-loader', 'css-loader' ]
          fallback: 'style-loader',
          use: "css-loader"
        }),
      }
    ]
  },
  plugins: [
    // aquí van los plugins
    new ExtractTextPlugin("css/[name].css")
    // new ExtractTextPlugin("css/styles.css")
  ]
}

SOPORTE DE IMÁGENES EN WEBPACK

https://github.com/webpack-contrib/url-loader npm install --save-dev url-loader

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // Aquí van los loaders
      {
        // test: que tipo de archivo quiero reconocer
        // use: que loader se va a encargar del archivo
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        // test: que tipo de archivo quiero reconocer
        // use: que loader se va a encargar del archivo
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          // [ 'style-loader', 'css-loader' ]
          fallback: 'style-loader',
          use: "css-loader"
        }),
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 1000000,
          }
        }
      }
    ]
  },
  plugins: [
    // aquí van los plugins
    new ExtractTextPlugin("css/[name].css")
    // new ExtractTextPlugin("css/styles.css")
  ]
}

Para ejecutar scripts con flags adiccionales

npm run build:sass -- --progess --watch