0

quería hacer un proyecto personal con Node, Express y Webpack pero me di cuenta que necesito funciones un poco mas avanzadas en el lado del Frontend porque estaba utilizando js sin babel y esto podía generar problemas, así que intente combinarlos pero al final nunca me funciono. ¿Alguien tiene algún ejemplo simple o sabe como combinarlos?, ya la única idea que se me ocurre es separarlos una carpeta para node y otra para Webpack y con el outputh de Webpack pasarlo directamente a otra capeta donde tenga Node y ponerlo en el public. De ahí en mas no tengo idea.

He encontrado diferentes métodos por internet pero ninguno me funciona, unos crean un solo webpack.config.js y otros dos.

Intente esta configuración pero no me funciono.

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
MiniCssExtractPlugin = require("mini-css-extract-plugin");
const nodeExternals = require('webpack-node-externals');
const path = require("path");

module.exports = {
  target: 'node',
  entry:path.resolve(__dirname, "desarrollo","index.js"),
    output: {
      filename: "[name].js",
      path: path.resolve(__dirname, "public"),
      publicPath: '/',
      clean: true
  },
  devtool: 'source-map',
  externals: [nodeExternals()],
  module: {
    rules:[
      {
        test:/\.js$/i,
        exclude: /node_modules/,
        use:"babel-loader",
      },
      {
        test:/\.html/i,
        use:[
        {
          loader: "html-loader",
          options: {
            minimize: true,
          },
        },
        ],
      },
      {
        test:/\.css$/i,
        use:[
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'./'
            }
          },
          "css-loader"
        ],
      },
    ],
  },
  plugins:[
   new HtmlWebpackPlugin({
    filename: "./index.html",
    template: "./desarrollo/public/index.html",
   }),
   new MiniCssExtractPlugin({
    filename:'[name].css'
   }),
  ],
};

package.json

{
  "name": "practica",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode=development --config webpack.config.js",
    "build": "webpack --mode=production",
    "serverdev": "webpack serve --mode=development",
    "serverprod": "webpack serve --mode=production",
    "nodedev": "node index",
    "nodeprod": "nodemon index"
  },
  "keywords": [],
  "author": "Yahir Antonio",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.1.0",
    "nodemon": "^2.0.7",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "express-fileupload": "^1.2.1",
    "filemanager-webpack-plugin": "^6.1.4",
    "nodemon-webpack-plugin": "^4.5.2",
    "tesseract.js": "^2.1.4",
    "webpack-node-externals": "^3.0.0"
  }
}

babel.config.json

{
  "presets": [
    [
      "@babel/env",
      {
        "corejs": 3.9,
        "useBuiltIns": "usage",
        "debug": true,
        "targets": "> 0.25%, not dead, not ie 11"
      }
    ]
  ]
}

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "10.11.0",
                    "esmodules": false
                }
            }
        ]
    ]
}

así están los archivos

Imagen de acomodo de los archivos y carpetas

3
  • estaba utilizando js sin babel y esto podía generar problemas, ¿Qué problemas? ¿Sabes lo que es Babel? ¿Sabes lo que es Webpack? ¿A qué te refieres con combinar Webpack con NodeJS y Express? Express, por lo general, levanta un servidor http de NodeJS que puede ser usado en desarrollo y en producción y por su parte Webpack levanta un servidor http exclusivo para desarrollo. ¿Qué quieres combinar de ambos y porqué? el 13 jul. 2021 a las 22:05
  • Problemas con otros navegadores mas antiguos que no tengan implementado ciertas actualizaciones que Ecmascript implementa en Javascript para facilitar la programación, si es un transcompilador que modifica implementaciones actualizadas de ecmascript a versiones mas antiguas, si, es un empaquetador de módulos, era mas bien utilizar por parte del backend node y express y por el frontend solo js en vez de react o angular, por practica pero practicando también webpack implementado entonces node, express (javascript + babel+demas) para crear un proyecto simple, el 14 jul. 2021 a las 22:22
  • un proyecto de practica, pero no sabia si se podían juntar o no en una sola carpeta, vi un video donde así lo hacían y supuse que si se podía para a través de un simple npm run start correr los dos en una sola consola. Y nada mas, posdata: parece que me estas vacilando. el 14 jul. 2021 a las 22:28

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.