webpack: Für diesen Dateityp benötigen Sie möglicherweise einen geeigneten Loader

Question

Ich verwende Webpack zum ersten Mal und bin nicht sehr gründlich mit Webpack. Ich benutze angular - ES6 - bable und ich versuche webpack-angular-translate zu verwenden.

ich unten Störung erhalte:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html Modul fehlgeschlagen analysieren:/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 Unerwartetes Token (1: 0)

Möglicherweise benötigen Sie einen geeigneten Loader für diesen Dateityp.

Ich versuche Preloader in Modulen zu setzen. Wenn ich versuche, den Preloader von HTML zu setzen, bekomme ich den obigen Fehler.

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

WebPackAngularTranslate.jsLoader() funktioniert gut. Ich bin nicht sicher, warum WebPackAngularTranslate.htmlLoader() Fehler wirft.

Jeder hat ein ähnliches Problem konfrontiert. Bitte hilf mir hier.

Vielen Dank im Voraus.

hier ist meine Konfigurationsdatei:

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

Es scheint, als index.html mit webpack auch geladen wird, aber es wird von der HTML-Loader-Konfiguration ausgeschlossen. Sie müssen entweder schließen (oder explizit ausschließen es nicht) oder verarbeite es nicht mit webpack ...

Answer 2

Sie brauchen, um sicherzustellen, dass Ihre loader nicht src/index.html

Dieses Spiel kann funktionieren sollte:

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