Saturday, October 14, 2017

Webpack html plugin is not generating html

By Hường Hana 4:00 AM , , , , Leave a Comment

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 ?

3 Answers

Answers 1

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

Answers 2

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'     })   ] }

webpack-html-ejs

Answers 3

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"     } }
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment