Webpack config not generating index.html in public folder

Question

I'm having a little trouble with my webpack config, for some reason it doesn't create an index.html file in my /public folder.

Please see webpack.config.js below:

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
    })
  ]
};

I've got one in my root directory and when I run in development mode everything works fine. Build script is "build": "NODE_ENV='production' webpack -p".

Thanks

Daniel · Accepted Answer · 2017-12-03 15:42:46Z

3

You need the HTML Webpack Plugin. This plugin creates the html file for you and adds every entry defined in webpacks entry prop to your html. Don't forget to install it.

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

Then in your webpack config:

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

...

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

For more information see here: https://github.com/jantimon/html-webpack-plugin

answered Dec 3, 2017 at 15:42

Daniel

2,05313 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AngryFridges Over a year ago

Thanks Daniel, works a treat. Any idea how I can change the css/js src in the generated index.html file from public/bundle.min.js to bundle.min.js as all files are already in the public folder.

Daniel Over a year ago

Please accpet my answer if it helped you. (click the arrow ) To your qs: Add the prop publicPath to the output prop. publicPath:'/' That is what htmlwebpackplugin prepends to the src fields. Just play a little with this prop.

AngryFridges Over a year ago

When i add new HtmlWebpackPlugin() it breaks my dev version, it states Target container is not a DOM element in the console.

Collectives™ on Stack Overflow

Webpack config not generating index.html in public folder

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related