Плагин Webpack html не генерирует HTML

Я использую html-плагин webpack для создания html-страницы из graphiql.ejs, но он не генерирует 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
    })
  ]
};

Я хочу создать index.html внутри каталога / public / graphql. Кто-нибудь знает, что я делаю не так? Есть ли другая команда для запуска веб-пакета?


webpack node.js javascript graphql html-webpack-plugin
person N Sharma    schedule 05.10.2017    source источник
comment
Вам нужно поместить его в массив plugins и экспортировать webpack.github.io/docs/ using-plugins.html   -  person serge1peshcoff    schedule 05.10.2017
comment
@ serge1peshcoff Я сделал pastebin.com/1NgiM3kY, но все равно не генерирует   -  person N Sharma    schedule 05.10.2017
comment
Ваш npm start скрипт запускает webpack.config.js файл?   -  person Jehy    schedule 09.10.2017
comment
@Jehy Нет. запускается start: nodemon server.js --exec babel-node --presets es2015, stage-2   -  person N Sharma    schedule 09.10.2017
comment
@Jehy Как включить и веб-пакет?   -  person N Sharma    schedule 11.10.2017
comment
не могли бы вы предоставить полный файл webpack.config.js?   -  person Navjot Ahuja    schedule 11.10.2017
comment
Вы просто нигде не запускаете webpack - так что никакого результата не получите. Проверьте раздел a config file в этой статье: webpack.github.io/docs/tutorials/getting- началось - достаточно запустить webpack команду.   -  person Jehy    schedule 11.10.2017

Ответы (3)


arrow_upward
5
arrow_downward

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

person inooNgt    schedule 12.10.2017
comment
как использовать имя выходного файла и шаблон - person N Sharma; 14.10.2017

arrow_upward
5
arrow_downward

Вот тот, который у меня сработал. Если вы все еще столкнетесь с какой-либо проблемой, дайте мне знать. Поделюсь кодом с 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

person Rajkeshwar Prasad    schedule 13.10.2017
comment
Я пробежал webpack -p - person Rajkeshwar Prasad; 13.10.2017
comment
Какое использование шаблона? - person N Sharma; 15.10.2017
comment
graphql.ejs - это исходный файл. Что будет преобразовано в index.html. это полезно, когда вы хотите настроить index.html по умолчанию для HtmlWebpackPlugin. - person Rajkeshwar Prasad; 15.10.2017
comment
Тогда что такое запись, я думал, что файл записи преобразуется в index.html - person N Sharma; 15.10.2017

arrow_upward
3
arrow_downward

Вам нужно убедиться, что вы действительно запускаете webpack, когда делаете npm start.

Один из способов сделать это - добавить prestart скрипт в package.json. Это будет автоматически выполнено перед сценарием start, когда вы выполните npm start (подробнее):

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