我是第一次使用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处理它…