Конфигурация Webpack не создает index.html в общей папке

У меня небольшие проблемы с конфигурацией моего веб-пакета, по какой-то причине он не создает файл index.html в моей папке /public.

Пожалуйста, смотрите webpack.config.js ниже:

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let DEBUG;

if (process.env.NODE_ENV === "production") {
  DEBUG = false;
} else {
  DEBUG = true; // process.env.NODE_ENV === "development"
}
//const DEBUG = true; // process.env.NODE_ENV === "development"

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: DEBUG ? "bundle.js" : "bundle.min.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["react", "es2015"]
        }
      },
      {
        test: /\.scss$/,
        loaders: DEBUG
          ? [
              "style-loader",
              "css-loader?sourceMap",
              "sass-loader?sourceMap",
              "postcss-loader"
            ]
          : ExtractTextPlugin.extract("css-loader!sass-loader!postcss-loader")
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: "file-loader?name=images/[name].[ext]"
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
  },
  plugins: [
    new ExtractTextPlugin("style.css", {
      allChunks: true
    })
  ]
};

У меня есть один в моем корневом каталоге, и когда я запускаю в режиме разработки, все работает нормально. Сценарий сборки "build": "NODE_ENV='production' webpack -p".

Спасибо


webpack javascript web-development-server
person AngryFridges    schedule 03.12.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужен плагин HTML Webpack. Этот плагин создает для вас html-файл и добавляет каждую запись, определенную в реквизите записи веб-пакетов, в ваш html. Не забудьте установить его.

$ npm install html-webpack-plugin --save-dev

Затем в конфигурации вашего веб-пакета:

var HtmlWebpackPlugin = require('html-webpack-plugin');

...

plugins: [
    new ExtractTextPlugin("style.css", {
      allChunks: true
    }),
    new HtmlWebpackPlugin()
  ]

Дополнительную информацию см. здесь: https://github.com/jantimon/html-webpack-plugin< /а>

person Daniel    schedule 03.12.2017
comment
Спасибо Даниэль, работает удовольствие. Любая идея, как я могу изменить css/js src в сгенерированном файле index.html с public/bundle.min.js на bundle.min.js, поскольку все файлы уже находятся в общей папке. - person AngryFridges; 03.12.2017
comment
Пожалуйста, примите мой ответ, если он вам помог. (щелкните стрелку ) К вашим вопросам: добавьте реквизит publicPath в выходной реквизит. publicPath:'/' Это то, что htmlwebpackplugin добавляет перед полями src. Просто поиграйте немного с этим реквизитом. - person Daniel; 03.12.2017
comment
Когда я добавляю новый HtmlWebpackPlugin(), он ломает мою версию dev, в консоли указывается, что целевой контейнер не является элементом DOM. - person AngryFridges; 03.12.2017