Curso Pr谩ctico de Webpack

Curso Pr谩ctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuraci贸n de Webpack para Express.js

4/22
Recursos

Aportes 4

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Si agregas este comentario antes del objeto de configuraci贸n de webpack tendr谩s autocompletado en vs code.

/** @type {import('webpack').Configuration} */
module.exports = {...}

Configuraci贸n de Webpack para Express.js

  • Creamos en la ra铆z de nuestro proyecto el archivo: webpack.config.js
  • En webpack.config.js:
const path = require('path');
// path: la ubicacion del proyecto

module.exports = {
    //module.export: la info de nuestra configuracion webpack
    name: 'express-server',
    //name: nombre del proyecto
    entry: './src/index.js',
    // entry: punto de entrada de nuestra aplicacion
    target: 'node',
    output: {
        //output: donde guardamos el recurso que fue modularizado por webpack
        path: path.resolve(__dirname, 'dist'),
        //path: ubicacion del guardado
        //__dirname: donde esta el proyecto en el Sistema Operativo
        // 'dist'(distribution): nombre del folder, si no existe entonces creara dist
        filename: 'index.js',
        //filename: como llamar a la aplicacion cuando se prepare para produccion
    },
    resolve: {
        // extensions: con que extensiones trabajaremos
        extensions: ['.js']
    },
    module: {
        rules: [
            //rules: reglas con las que trabajaremos en el proyecto
            // se asigna a cada loader(optimizador), con que tipo de archivo trabajara y con que reglas
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

Scripts del package.json:

    "start": "node dist/index.js",
    "build": "webpack --mode production"

En 鈥渄ev鈥 hay dos formas que funcionan igual:

"dev": "webpack --mode development && npm run start",
//"dev": "webpack --mode development && node dist/index.js",

BABEL creamos en la raiz el archivo .babelrc:

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

y corremos npm run dev.

Webpack

Si les sale un error de Tipo

WARNING in ./node_modules/express/lib/view.js

Pueden dirijirse a este LINK y all铆 encontraran una respuesta