webpack：你可能需要一个合适的加载器来处理这种文件类型

Question

我第一次使用webpack，并且我对webpack并不是很全面。我正在使用角度 - ES6 - bable，我正在尝试使用webpack-angular-translate。

我得到以下错误：./~/html-webpack-plugin/lib/loader.js!./src/index.html 模块

错误解析失败：/用户/ samirshah /桌面/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意外标记（1：0）

您可能需要一个合适的加载程序来处理此文件类型。

我想在模块中设置预加载器。当我尝试设置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' 
}; 

Answer 1

这似乎index.html的加载的WebPack过，但它是从HTML程序的配置排除。你要么必须包括（或没有明确排除的话）或者不符合的WebPack处理它...

Answer 2

你需要确保你的装载机无法比拟src/index.html

这应该工作：

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