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

【问题标题】：Using webpack-manifest-plugin getting the error 'Uncaught SyntaxError: Unexpected token <'使用 webpack-manifest-plugin 得到错误 'Uncaught SyntaxError: Unexpected token <'
【发布时间】：2016-09-29 03:04:12
【问题描述】：

我昨天找到了webpack-manifest-plugin，并在this tutorial.之后开始使用它

当我在浏览器上打开我的应用程序时，它显示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')

【问题讨论】：

标签： node.js express webpack pug

【解决方案1】：

我猜ManifestPlugin 不知道服务器上文件的正确路径，只是尝试使用与 pgae 相同目录中的文件。这会失败，可能会呈现一些 HTML 错误页面（用意外的< 解释错误）。

如果是这种情况，那么您只需将输出目录的公共路径（假设它在http://yourserver/build/bundle.[hash].js 中访问，那么公共路径将是/build/）添加到ManifestPlugin 的配置中：

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

【讨论】：

我对这个答案感到困惑。文件名不是“捆绑”吗？所以 basePath 应该是 '/build' ???

【解决方案2】：

您是使用 Webpack 开发服务器还是只是静态构建文件？

如果您使用的是 Webpack 开发服务器，则清单不会被构建到静态文件中，而是从内存中的开发服务器配置中指定的不同端口上提供。如果是这种情况，您可以使用 node-fetch 之类的东西来获取清单。

另外，您能否记录下您从manifest['main.js'] 返回的内容，只是为了查看读取文件是否是罪魁祸首？

我确实记得以前看到过这样的问题，但我无法回忆起修复的方法。在此期间我会继续挖掘。

【讨论】：

感谢您的尝试。我们的项目正在使用快递服务器。 @Frxstrem 的回答解决了这个问题
酷，很高兴你把它整理好了