2017-10-05 119 views
15

我使用的WebPack HTML插件生成從graphiql.ejs HTML頁面,但它不是生成HTML頁面,當我運行npm start的WebPack HTML插件未生成HTML

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?

+0

你需要把它放到'plugins'陣列和導出https://webpack.github.io/docs/using:這會自動當你做start腳本npm startmore details)前執行-plugins.html – serge1peshcoff

+0

@ serge1peshcoff我做了https://pastebin.com/1NgiM3kY但仍然沒有生成 –

+0

您的'npm start'腳本是否運行'webpack.config.js'文件? – Jehy

回答

4

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

+0

什麼是輸出文件名和模板的使用 –

5

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

+0

你用什麼命令來運行webpack? –

+0

我運行'webpack -p' –

+0

什麼是使用模板? –

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" 
    } 
}