使用webpack-manifest-plugin得到错误'Uncaught SyntaxError:Unexpected token <'

我昨天发现了webpack-manifest-plugin,并在本教程开始使用它。

当我在浏览器上打开我的应用程序时,它显示Uncaught SyntaxError: Unexpected token < 。 该应用程序正在加载正确的散列。 错误指向<!DOCTYPE html>

以下是我的webpackconfiguration:

 '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') 

我猜测ManifestPlugin不知道你的服务器上的文件的正确path,只是试图使用与pgae相同的目录中的文件。 这将失败,可能会呈现一些HTML错误页面(解释错误与意外的< )。

如果是这种情况,那么你应该只是添加你的输出目录的公共path(假设它在http://yourserver/build/bundle.[hash].js ,那么公共path将是/build/ManifestPlugin的configuration:

 new webpackManifestPlugin({ basePath: '/bundle', }) 

你使用Webpack dev服务器还是静态构build文件?

如果您正在使用Webpack开发服务器,清单将不会被内置到一个静态文件中,而是从您的开发服务器configuration中指定的不同端口的内存中提供。 如果是这种情况,可以使用像node-fetch这样的东西来获取清单。

另外,你是否可以logging你从manifest['main.js']只是为了看看这个文件是不是罪魁祸首?

我记得之前看到过这样的一个问题,但是我不能记住我的记忆来找出修复的方法。 我会继续挖掘。