Webpack एचटीएमएल प्लगइन एचटीएमएल

Question

मैं webpack एचटीएमएल का उपयोग कर रहा graphiql.ejs से html पृष्ठ उत्पन्न करने के लिए प्लगइन नहीं पैदा कर रहा है, लेकिन यह html पृष्ठ नहीं पैदा कर रहा है जब मैं 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 
    }) 
    ] 
}; 

मैं/public/graphql निर्देशिका के अंदर index.html उत्पन्न करना चाहता हूं। क्या कोई जानता है कि मुझसे क्या गलती हो रही है ? क्या वेबपैक चलाने के लिए कोई अन्य कमांड है?

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

रन webpack -p एचटीएमएल

webpack -p

Answer 2

यहाँ एक है कि मेरे लिए काम किया है उत्पन्न करने के लिए। यदि आप अभी भी किसी भी मुद्दे का सामना करते हैं तो मुझे बताएं। मैं कोड को जिथब के साथ साझा करूंगा।

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

Answer 3

आप यह सुनिश्चित करें कि आप वास्तव में webpack चलाने जब आप npm start कर की जरूरत है।

ऐसा करने का एक तरीका prestart स्क्रिप्ट package.json में जोड़ना है।

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