Webpack: you may need an appropriate loader to handle this type of file

Question

I am using webpack for the first time and I am not very good at webpack. I am using angular - ES6 - bable and I am trying to use webpack- angular -translate.

I get below error:

A mistake in. /~/html-webpack-plugin/lib/loader.js!./src/index.html Parsing error: / Users / samirshah / Desktop / nuskin_translate / node_modules / html-webpack-plugin / lib / loader.js! / Users / samirshah / Desktop / nuskin_translate / node_modules / webpack-angular-translate / dist / html / html-loader.js! /Users/samirshah/Desktop/nuskin_translate/src/index.html Unexpected token (1: 0)

An appropriate bootloader may be required to process this type of file.

I am trying to install preloaders in modules. When I try to install preloader from html, I get the above error.

preLoaders: [
    {
        test: /\.html$/,
        loader: WebPackAngularTranslate.htmlLoader()
    }
],

WebPackAngularTranslate.jsLoader () is working fine. I am not sure why the error WebPackAngularTranslate.htmlLoader () is causing the error.

Anyone faced any similar problem. Please help me here.

Thanks in advance.

here is my configuration file:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var WebPackAngularTranslate = require("webpack-angular-translate");

module.exports = {
  debug: true,
  entry: {
  vendor: ["jquery", "angular"],
  bundle: ['babel-polyfill', './src/app.js'],
},
// entry: ['babel-polyfill', './src/app.js'],
 output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js'
  },
  devServer: {
    // This is required for webpack-dev-server. The path should  
    // be an absolute path to your build destination. 
    outputPath: path.join(__dirname, 'public')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Website Starter',
      template: 'src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }
    }),
    new WebPackAngularTranslate.Plugin(),
    new ExtractTextPlugin("main.css"),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: 2
    }),
    // new webpack.optimize.UglifyJsPlugin({
    //   sourceMap: true,
    //   mangle: false,

    // }),
    new CopyWebpackPlugin([{ from: 'src/**/*.js', to: __dirname +     '/public' }]),
new CleanWebpackPlugin(['public'], {
  root: path.resolve(__dirname),
  verbose: true,
  dry: true
})],
  module: {
    preLoaders: [
        {
            test: /\.html$/,
            loader: WebPackAngularTranslate.htmlLoader()
        }],
    loaders: [
      {
                test: /\.js$/,
                loader: WebPackAngularTranslate.jsLoader()
        },
      {
        test: /\.js$/, loader: 'babel-loader', query: {
          // https://github.com/babel/babel-loader#options
          cacheDirectory: true,
          presets: ['es2015', 'stage-2']
        }, exclude: [/node_modules/, /\.spec.js$/, /\npm\.js$/]
      },
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
      { test: /\.html$/, loader: 'file-loader?name=[path]/[name].[ext]', exclude: /index\.html$/ },
      { test: /\.jade$/, loader: 'file-loader?name=[path]/[name].html!jade-html?pretty=true' },
      // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.(png|jpg)$/, loader: 'file-loader?name=assets/images/[name].[ext]' },
      // helps to load bootstrap css.
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]'
      },
      {
        test: /\.woff2$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]'
      },
      {
        test: /\.otf$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader?name=assets/images/[name].[ext]'
      }
    ]
  },

  devtool: 'source-map'
};

Answer 1

It seems that index.html is also loaded using webpack, but it is excluded from the html loader configuration. You must either include (or not explicitly exclude it) or not process it with webpack ...

Answer 2

You need to make sure your bootloader cannot match src/index.html

:

   {
        test: /\.html$/,
        loader: WebPackAngularTranslate.htmlLoader(),
        exclude: /src\/index\.html$/
    }