<strong>AYUDA</strong>! El comando npm run build no me genera el archivo index.html dentro de la carpeta dist. Me genera la carpeta dist ...

José Martín Miret

Pregunta

student•hace 5 años

AYUDA! El comando npm run build no me genera el archivo index.html dentro de la carpeta dist.

Me genera la carpeta dist y un archivo main.js, pero el index.html no!

(Tengo el template del index.html dentro de la carpeta public)

Este es el codigo del webpack.config.js

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin([
      {
        inject: true,
        template: './public/index.html',
        filename: './index.html',
      }
    ])
  ]
}

Y este es el package.json

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page aplication",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Hefes",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.9.1",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

José Martín Miret

student•hace 5 años

Recien ví lo que dijiste sobre sacar el webpack.config.js de la carpeta src, y ahora si funciona! Genio anthony! Me re salvaste mil gracias!!

José Martín Miret

student•hace 5 años

Le agregué la "," luego del paréntesis, y probé de nuevo el npm run build, sigue sin aparecer el html. El código esta exactamente igual

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(
      {
        inject: true,
        template: './public/index.html',
        filename: './index.html',
      }
    ),
  ]
}```

José Martín Miret

student•hace 5 años

José Martín Miret

student•hace 5 años

Hola anthony! si, el index.js esta dentro de src, a la misma altura que el webpack.config.js

José Martín Miret

student•hace 5 años

Hola diego! probé quitar los [ ], pero sigue sin aparecer el html en la carpeta dist :/

Diego Felipe Mahecha Cortes

student•hace 5 años

Que tal martinmiret, Para solucionar tu inconveniente quita [ ] de tu código en la parte new HtmlWebpackPlugin : Es decir:

new HtmlWebpackPlugin(
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        )

Y de nuevo haz build.

<strong>AYUDA</strong>! El comando npm run build no me genera el archivo index.html dentro de la carpeta dist. Me genera la carpeta dist ...

Curso de Single Page Application con JavaScript Vanilla

Curso de Single Page Application con JavaScript Vanilla