我找到了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')
最佳答案
我猜ManifestPlugin不知道服务器上文件的正确路径，只是尝试使用与 pgae 相同目录中的文件。这会失败，可能会渲染一些 HTML 错误页面(用意外的 < 解释错误)。
如果是这种情况，那么您应该将输出目录的公共(public)路径(假设在 http://yourserver/build/bundle.[hash].js 中访问它，那么公共(public)路径将为 /build/ )添加到 ManifestPlugin 的配置中。 :
new webpackManifestPlugin({
basePath: '/bundle',
})
关于node.js - 使用 webpack-manifest-plugin 出现错误 'Uncaught SyntaxError: Unexpected token <'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39760732/