Webpack html plugin is not generating html

Question

I am using webpack html plugin to generate the html page from the graphiql.ejs but it is not generating html page when I am running npm start

webpack.config.js

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: "public/graphql/index.html", // Write the file to <public-path>/graphql/index.html
      inject: false, // Do not inject any of your project assets into the template
      GRAPHQL_VERSION: packageJSON.dependencies.graphql.replace(/[^0-9.]/g, ""), // Get the graphql version from my package.json
      template: "graphiql.ejs" // path to template
    })
  ]
};

I want to generate the index.html inside the /public/graphql directory. Does anyone know what I am doing wrong ? Is there any other command to run webpack ?

You need to put it into the `plugins` array and export it https://webpack.github.io/docs/using-plugins.html — serge1peshcoff, Oct 05 '17 at 10:13
@serge1peshcoff I did https://pastebin.com/1NgiM3kY but still it is not generating — N Sharma, Oct 05 '17 at 10:30
@Jehy Nope. it runs "start": "nodemon server.js --exec babel-node --presets es2015,stage-2" — N Sharma, Oct 09 '17 at 18:10
You simply don't run webpack anywhere - so you don't get any result. Check `a config file` section in this article: https://webpack.github.io/docs/tutorials/getting-started/ - you should just run `webpack` command. — Jehy, Oct 11 '17 at 19:26

score 5 · Accepted Answer · answered Oct 12 '17 at 02:23

webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const packageJSON=require("./package.json");
    module.exports = {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'public'),
            filename:"build.js"
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: "graphql/index.html", // Write the file to <public-path>/graphql/index.html
                inject: false, // Do not inject any of your project assets into the template
                GRAPHQL_VERSION: packageJSON.dependencies.graphql.replace(/[^0-9.]/g, ""), // Get the graphql version from my package.json
                template: "graphiql.ejs" // path to template
            })
        ]      
    }

run webpack -p to generate the html

webpack -p

whats use of output file name and template – N Sharma Oct 14 '17 at 15:33 — N Sharma, Oct 14 '17 at 15:33

score 5 · Answer 2 · answered Oct 13 '17 at 06:45

5

Here is the one that worked for me. If still you face any issue let me know. I will share the code with github.

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const packageJson = require("./package.json");

const GRAPHQL_VERSION = packageJson.dependencies.graphql.replace(/[^0-9.]/g, '');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'index.bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({ 
      filename: 'index.html',
      inject: false,
      GRAPHQL_VERSION: GRAPHQL_VERSION,
      template: 'graphiql.ejs'
    })
  ]
}

answered Oct 13 '17 at 06:45

Rajkeshwar Prasad

869
8
11

I ran by `webpack -p` – Rajkeshwar Prasad Oct 13 '17 at 07:46
what;s use of template ? – N Sharma Oct 15 '17 at 18:05
1

graphql.ejs is the source file. Which will get converted to index.html. it's useful when you want to customize the default index.html of HtmlWebpackPlugin. – Rajkeshwar Prasad Oct 15 '17 at 18:23
Then what is entry I thought entry file get converted into index.html – N Sharma Oct 15 '17 at 18:37

score 3 · Answer 3 · answered Oct 14 '17 at 10:09

You need ensure that you actually run webpack when you do npm start.

One way of doing that is to add a prestart script to package.json. This will automatically be executed before the start script when you do npm start (more details):

{
    "version": "1.0.0,
    "name": "my-app",
    "scripts": {
        "prestart": "webpack",
        "start": "nodemon server.js --exec babel-node --presets es2015,stage-2"
    }
}

Webpack html plugin is not generating html

3 Answers3