Configurar webpack para trabajar con múltiples páginas en React

Actualmente son muy populares las Single Page Aplications (SPA), sin embargo su principal problema es que no son escalables ya que solo se genera un archivo de javascript que puede pesar demasiado y esto hace que nuestra página tarde demasiado en cargar.

Hay una solución sencilla y es manejar cada pantalla como un archivo separado, para así mantener optimizada toda nuestra aplicación:

Configura el entorno de trabajo:

1. Crea a carpeta del proyecto

2. Como buena práctica ejecuta git init

3. Crea el archivo .gitignore para ignorar la carpeta node_modules.

4. Ejecuta npm init -y para comenzar el proyecto sin configurar nada.

Instala las dependencias que va a utilizar webpack:

• npm install webpack webpack-dev-server webpack-cli html-webpack-plugin --save-dev

Instala las dependencias que necesita React:

• npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev; npm install react react-dom

Instala las dependencias para utilizar css:

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

Configura babel para usar React:

• Crea un archivo llamado .babelrc y le añadimos lo siguiente:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Esto le permite a babel convertir el código de React en JS.

Crea los archivos necesarios:

• Crea la carpeta public donde van a estar los archivos html: index.html y blog.html

• Crea la carpeta src y dentro crea la carpeta pages, en la carpeta pages crea los archivos index de cada página, por ahora solo van a ser dos: index.js y blog.js en los cuales vamos a imprimir un hello con React para probar la configuración.

• Crea el archivo webpack.config.dev.js en la raíz del proyecto para configurar el entorno de desarrollo.

• En el package.json añade el script “start”: “webpack-dev-server --config ./ webpack.config.dev.js” para
  poder iniciar el entorno de desarrollo.

Configura el archivo webpack.config.dev.js:

En este archivo solo se necesitan dos dependencias: join y HtmlWebpackPlugin:

• En entry indicamos los archivos de JavaScript que tendrá la página, deben tener el mismo nombre que la página.

• En los plugins vamos a instanciar un HtmlWebpackPlugin por cada página que necesitemos(Asegúrate de que exista un archivo Html para esa página en la carpeta public).

  Cada instancia debe tener esta configuración:

  • template: Es el archivo html a partir del cual va a crear la página.
  • filename: Es el nombre del archivo que se va a generar.
  • chunks: Define qué archivos de JavaScript se van a incluir en la página.

Te dejo el gist de la configuración 😀

const { join } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    index: join(__dirname, 'src', 'pages', 'index.js'),
    blog: join(__dirname, 'src', 'pages', 'blog.js'),
  },

  output: {
    path: join(__dirname, 'dist'),
    filename: 'js/[name].js',
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: join(__dirname, 'public', 'index.html'),
      filename: 'index.html',
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, 'public', 'blog.html'),
      filename: 'blog.html',
      chunks: ['blog'],
    }),
  ],

  devServer: {
    index: 'index.html',
    contentBase: join(__dirname, 'src', 'pages'),
    open: true,
    port: 2001,
    watchContentBase: true,
    watchOptions: {
      poll: 800,
    },
  },
};