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$/ 
    }