2017-10-05 99 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" 
    } 
}