webpack:你可能需要一个合适的加载器来处理这种文件类型
我第一次使用webpack,并且我对webpack并不是很全面。我正在使用角度 - ES6 - bable,我正在尝试使用webpack-angular-translate。webpack:你可能需要一个合适的加载器来处理这种文件类型
我得到以下错误:./~/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'
};
这似乎index.html的加载的WebPack过,但它是从HTML程序的配置排除。你要么必须包括(或没有明确排除的话)或者不符合的WebPack处理它...
你需要确保你的装载机无法比拟src/index.html
这应该工作:
{
test: /\.html$/,
loader: WebPackAngularTranslate.htmlLoader(),
exclude: /src\/index\.html$/
}
我会说只是仔细检查,以确保您的npm安装的加载程序。另外,根据文档,您可能必须提供一个文件名作为js加载器的参数。 – Shinobi881