Webpack html 插件不生成 html

Posted 2023-03-08

【中文标题】Webpack html 插件不生成 html

【英文标题】：Webpack html plugin is not generating html

【发布时间】：2018-03-16 21:03:55

【问题描述】：

我正在使用 webpack html 插件从 graphiql.ejs 生成 html 页面，但是当我运行 npm start 时它没有生成 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 吗？

【问题讨论】：

需要将其放入plugins数组并导出webpack.github.io/docs/using-plugins.html

@serge1peshcoff 我做了pastebin.com/1NgiM3kY 但它仍然没有生成

您的npm start 脚本是否运行webpack.config.js 文件？

@Jehy 不。它运行“开始”：“nodemon server.js --exec babel-node --presets es2015,stage-2”

@Jehy 如何也启用 webpack ？

【参考方案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

【讨论】：

输出文件名和模板的用途

【参考方案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'
    )
  ]

【讨论】：

我跑过webpack -p

模板的用途是什么？

graphql.ejs 是源文件。它将被转换为 index.html。当您想自定义 HtmlWebpackPlugin 的默认 index.html 时，它很有用。

那是什么条目，我认为条目文件被转换成 index.html

【参考方案3】：

您需要确保在执行npm start 时实际运行 webpack。

一种方法是将prestart 脚本添加到package.json。当您执行 npm start (more details) 时，这将在 start 脚本之前自动执行：

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