webpack : You may need an appropriate loader to handle this file type

Question

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

I am getting below error:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html Module parse failed: /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)

You may need an appropriate loader to handle this file type.

I am trying to set preloaders in modules. When I try to set preloader of html I am getting above error.

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

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

Any one has 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's 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'
};

I'd say just double check to make sure you npm installed the loader. Also, according to the documentation, you may have to supply a filename as an argument to the js loader. — user5250554

Micha Reiser Micha Reiser · Accepted Answer · 2016-08-22T16:41:20

It seems as index.html is loaded with webpack too, but it is excluded from the html loader configuration. You either have to include (or not explicit exclude it) or do not process it with webpack...

webpack : You may need an appropriate loader to handle this file type

2 Answers