的WebPack HTML插件未生成HTML

Question

我使用的WebPack HTML插件生成從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。有誰知道我做錯了什麼？有沒有其他命令來運行webpack？

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生成HTML

的WebPack -p

Answer 2

這裏是爲我工作的人。如果你仍然面臨任何問題讓我知道。我將與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' 
    }) 
    ] 
} 

Answer 3

你需要確保當你做npm start你實際運行的WebPack。

這樣做的一種方法是將prestart腳本添加到package.json。

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