webpack: 您可能需要一个适当的加载器来处理此文件类型。

Question

我第一次使用webpack，对webpack不是很熟悉。我正在使用angular-ES6-bable，并尝试使用webpack-angular-translate。

我遇到了以下错误：

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)

你可能需要一个适当的加载器来处理此文件类型。

我试图在modules中设置preloaders。当我尝试设置html的preloader时，就会出现上述错误。

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

WebPackAngularTranslate.jsLoader() 工作正常。但我不确定为什么 WebPackAngularTranslate.htmlLoader() 抛出了错误。

有没有人遇到过类似的问题。请在这里帮助我。

提前感谢您。

以下是我的配置文件：

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'
};

- Samir

---

我建议你再仔细检查一下是否已经使用npm安装了loader。此外，根据文档，你可能需要将文件名作为js loader的参数提供。 - user5250554

Answer 1

看起来 index.html 也被 webpack 加载了，但它在 html loader 配置中被排除了。您可以选择将其包括（或不显式地排除它），或者不使用 webpack 处理它...

- Micha Reiser

Answer 2

你需要确保你的加载器无法匹配 src/index.html

这应该可以工作：

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

- mastilver