使用webpack-清单插件获取错误“Uncaught:意外令牌<”
我昨天找到了webpack-清单-插件，并在本教程。之后开始使用它
当我在浏览器上打开我的应用程序时，它会显示Uncaught SyntaxError: Unexpected token <。该应用程序正在加载正确的哈希。错误指向<!DOCTYPE html>。
以下是webpack的配置：
'use strict'
var webpack = require('webpack');
var path = require('path');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var webpackManifestPlugin = require('webpack-manifest-plugin');
var autoprefixer = require('autoprefixer');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'./modules/index.js'
],
output: {
path: path.join(__dirname, 'public/build'),
filename: 'bundle.[hash].js'
},
module: {
noParse: [
/aws\-sdk/,
],
loaders: [{
test: /\.css$/,
include: [path.resolve(__dirname)],
loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
{
test: /\.js$/,
exclude: /node_modules/,
include: __dirname,
loaders: ['babel']
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader?limit=10000&name=images/[name].[ext]',
include: [
path.resolve(__dirname)
]
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
loader: 'url-loader?limit=10000&name=fonts/[name].[ext]',
include: [
path.resolve(__dirname)
]
}
]
},
plugins: [
new extractTextWebpackPlugin("style.css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpackManifestPlugin()
],
postcss() {
return [ autoprefixer({
browsers: ['last 10 versions']
})
];
}
}以下是我的manifest.json输出：
{
"fonts/glyphicons-halflings-regular.eot": "fonts/glyphicons-halflings-regular.eot",
"fonts/glyphicons-halflings-regular.svg": "fonts/glyphicons-halflings-regular.svg",
"fonts/glyphicons-halflings-regular.ttf": "fonts/glyphicons-halflings-regular.ttf",
"fonts/glyphicons-halflings-regular.woff": "fonts/glyphicons-halflings-regular.woff",
"fonts/glyphicons-halflings-regular.woff2": "fonts/glyphicons-halflings-regular.woff2",
"main.css": "style.css",
"main.js": "bundle.7116359824fc577b65b9.js"}
以下是我的app.js文件：
'use strict'
import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'
import { readFileSync } from 'jsonfile'
// path for manifest json file
const manifestPath = `${process.cwd()}/public/build/manifest.json`
//read the manifest.json file
const manifest = readFileSync(manifestPath);
// js and css bundle maping to objects
const jsBundle = manifest['main.js'];
//import axios from 'axios'
//import store from './modules/store'
const app = express()
// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'jade')
// config static dir
app.use(favicon(path.join(__dirname, 'public', 'images/favicon.ico')))
app.use(express.static(path.join(__dirname, 'public')))
// route handler
app.get('*', function (req, res) {
res.render('index', { title: 'Platform', jsBundle})
})
export default app最后这个index.jade
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
title= title
meta(name='description', content='')
link(rel='stylesheet', href='/build/style.css')
body
#app
script(src=jsBundle)
script(async,src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBp0nIBIEWDsSp2lagOzOX4zdPEanFaDM8&libraries=drawing,places&callback=mapsLoaded')回答 2
Stack Overflow用户
发布于 2016-09-29 03:20:06
我猜ManifestPlugin不知道您服务器上文件的正确路径，只是尝试使用与pgae相同的目录中的文件。这将失败，可能会呈现一些HTML页面(用意外的<解释错误)。
如果是这样的话，那么应该将输出目录的公共路径(假设它在http://yourserver/build/bundle.[hash].js中访问，那么公共路径将是/build/)添加到ManifestPlugin的配置中。
new webpackManifestPlugin({
basePath: '/bundle',
})Stack Overflow用户
发布于 2016-09-29 03:45:54
您是在使用Webpack开发服务器，还是只是静态地构建文件？
如果您正在使用Webpack dev服务器，则清单将不会内置到静态文件中，而是从内存中在dev服务器配置中指定的另一个端口上提供服务。如果是这样的话，您可以使用类似于节点提取的方法来获取清单。
另外，您能否记录从manifest['main.js']获得的信息，看看读取的文件是否是罪魁祸首？
我确实记得以前见过这样的一个问题，但是我无法用我的记忆来找出修复方法是什么。在此期间我会继续挖掘。
https://stackoverflow.com/questions/39760732
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号