1

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

1 Answer 1

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

3
  • 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. Dec 3, 2017 at 16:03
  • 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.
    – Daniel
    Dec 3, 2017 at 16:19
  • When i add new HtmlWebpackPlugin() it breaks my dev version, it states Target container is not a DOM element in the console. Dec 3, 2017 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.