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

前端之家收集整理的这篇文章主要介绍了webpack:您可能需要一个合适的加载器来处理此文件类型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是第一次使用webpack而且我对webpack不是很透彻.我正在使用角度 – ES6 – bable,我正在尝试使用webpack-angular-translate.

我收到以下错误

错误在./~/html-webpack-plugin/lib/loader.js!./ src / index.html
    模块解析失败:/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意外的令牌(1:0)

您可能需要适当的加载程序来处理此文件类型.

我试图在模块中设置预加载器.当我尝试设置html的预加载器时,我遇到了错误.

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',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$/,"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$/,{
        test: /\.otf$/,{
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,{
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,{
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader: 'file-loader?name=assets/images/[name].[ext]'
      }
    ]
  },devtool: 'source-map'
};

解决方法

似乎index.html也加载了webpack,但它被排除在html加载器配置之外.您要么必须包含(或不明确排除它),要么不使用webpack处理它…

猜你在找的Angularjs相关文章