Webpack Uncaught syntax error: Unexpected token <
Webpack Uncaught syntax error: Unexpected token <
当我使用 webpack 打包我的 js 文件时，
首先，当我在 cmd 上使用 npm 运行 命令 webpack 时，会创建 2 个包文件，即 bundle.js 和 1.bundle.js。创建 2 个捆绑文件是否正常？
其次，当我在我的 index.html 中使用 bundle.js 然后它被加载并且 1.bundle.js 也被加载到页面上但是 1.bundle.js 被修改为喜欢 html 带有各种脚本标签的文件。这也正常吗？？
第三，它在控制台中显示文件 1.bundle.js 中的 Uncaugh syntax error: Unexpected token < 错误，即当它读取 1.bundle.js 时，它开始读取开头包含的 <!DOCTYPE HTML>文件并显示错误 < in <!DOCTYPE HTML> is unexpected。任何帮助将不胜感激
bundle.js
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, callbacks = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(installedChunks[chunkId])
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/ while(callbacks.length)
/******/ callbacks.shift().call(null, __webpack_require__);
/******/ };
/******/ // The module cache
/******/ var installedModules = {};
/******/ // object to store loaded and loading chunks
/******/ // "0" means "already loaded"
/******/ // Array means "loading", array contains callbacks
/******/ var installedChunks = {
/******/ 0:0
/******/ };
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/ script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__.e/* require */(1, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [
// Load our app module and pass it to our definition function
__webpack_require__(1),
]; (function(test){
test.init();
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
//saksham was here
/***/ }
/******/ ]);
1.bundle..js
webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
__webpack_require__(3),
__webpack_require__(20),
__webpack_require__(14),
__webpack_require__(15),
__webpack_require__(16),
__webpack_require__(17),
__webpack_require__(6),
__webpack_require__(11),
__webpack_require__(29),
__webpack_require__(32),
__webpack_require__(33)
], __WEBPACK_AMD_DEFINE_RESULT__ = function($, jPlayer, d_qtip_2, emotify, colorpicker, fileattachment){
var init = function() {
$(document).ready(function(){
if(typeof(window.xxxx)==="function") {
window.xxxx();
console.log("saksham is a virus");
}
xxx.xxxx();
if(!(xxxx.checkMobile() && xxxx.embed.id === false && xxxx.app.mobile_web === '1')){
xxxx.init();
xxxx.init();
}
else{
xxxx.emit('mobileButtonLoad', []);
}
});
aaaa.on('ChatDisconnected', function() {
if(xxxx.app.chatAccess) {
xxxx.init();
}
else{
$('#drupalchat-wrapper').hide();
//console.log('hidden');
//console.log(xxx.frontend.altrovr );
if(xxx.frontend.altrovr == true){
$("#drupalchat-altrovr").show();
$("#drupalchat").hide();
}
}
});
};
return {
'init': init
};
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
...etc
现在 1.bundle.js 被修改为这个。我从浏览器控制台旁边的网络部分复制了它
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/terms/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:og="http://ogp.me/ns#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:sioc="http://rdfs.org/sioc/ns#"
xmlns:sioct="http://rdfs.org/sioc/types#"
xmlns:skos="http://www.w3.org/2004/02/skos/core#"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://web.iflychatdev.com:12000/websites/t3/misc/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortlink" href="/websites/t3/node/1" />
<link rel="canonical" href="/websites/t3/node/1" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<title>iflychat-require-app | T3</title>
<style type="text/css" media="all">
</style>
<style type="text/css" media="all">
</style>
<style type="text/css" media="all">
</style>
<style type="text/css" media="all">
@import
...etc
现在正常了吗？？该文件已更改
以及如何摆脱意外标记的错误<
p.s：我正在将我的应用程序从 requirejs 迁移到 webpack
webpack.config.js
var path = require('path');
module.exports = {
//our config
context: path.resolve(__dirname, 'require'),
entry: './iflychat-main',
output: {
path: path.resolve('./dist'),
filename: 'bundle.js'
},
resolve: {
modulesDirectories: ['.','./require/libs'],
},
}
主 js 文件 bundle.js 试图从 url 中以这种方式生成请求块：
script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
其中 __webpack_require__.p 是 webpack public 路径。
这意味着块将从相对于文档 (/websites/t3/node/) 的路径加载。但是由于您的文件位于 /websites/t3/iflychat-app/require/，因此无法正确加载块。
因此，解决方案是指定正确的 js 资产路径：
module.exports = {
...
output: {
path: path.resolve('./dist'),
publicPath: '/websites/t3/iflychat-app/require/',
filename: 'bundle.js'
},
...
}
当我使用 webpack 打包我的 js 文件时，
首先，当我在 cmd 上使用 npm 运行 命令 webpack 时，会创建 2 个包文件，即 bundle.js 和 1.bundle.js。创建 2 个捆绑文件是否正常？
其次，当我在我的 index.html 中使用 bundle.js 然后它被加载并且 1.bundle.js 也被加载到页面上但是 1.bundle.js 被修改为喜欢 html 带有各种脚本标签的文件。这也正常吗？？
第三，它在控制台中显示文件 1.bundle.js 中的 Uncaugh syntax error: Unexpected token < 错误，即当它读取 1.bundle.js 时，它开始读取开头包含的 <!DOCTYPE HTML>文件并显示错误 < in <!DOCTYPE HTML> is unexpected。任何帮助将不胜感激
bundle.js
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, callbacks = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(installedChunks[chunkId])
/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/ while(callbacks.length)
/******/ callbacks.shift().call(null, __webpack_require__);
/******/ };
/******/ // The module cache
/******/ var installedModules = {};
/******/ // object to store loaded and loading chunks
/******/ // "0" means "already loaded"
/******/ // Array means "loading", array contains callbacks
/******/ var installedChunks = {
/******/ 0:0
/******/ };
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/ script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__.e/* require */(1, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [
// Load our app module and pass it to our definition function
__webpack_require__(1),
]; (function(test){
test.init();
}.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));});
//saksham was here
/***/ }
/******/ ]);
1.bundle..js
webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
__webpack_require__(3),
__webpack_require__(20),
__webpack_require__(14),
__webpack_require__(15),
__webpack_require__(16),
__webpack_require__(17),
__webpack_require__(6),
__webpack_require__(11),
__webpack_require__(29),
__webpack_require__(32),
__webpack_require__(33)
], __WEBPACK_AMD_DEFINE_RESULT__ = function($, jPlayer, d_qtip_2, emotify, colorpicker, fileattachment){
var init = function() {
$(document).ready(function(){
if(typeof(window.xxxx)==="function") {
window.xxxx();
console.log("saksham is a virus");
}
xxx.xxxx();
if(!(xxxx.checkMobile() && xxxx.embed.id === false && xxxx.app.mobile_web === '1')){
xxxx.init();
xxxx.init();
}
else{
xxxx.emit('mobileButtonLoad', []);
}
});
aaaa.on('ChatDisconnected', function() {
if(xxxx.app.chatAccess) {
xxxx.init();
}
else{
$('#drupalchat-wrapper').hide();
//console.log('hidden');
//console.log(xxx.frontend.altrovr );
if(xxx.frontend.altrovr == true){
$("#drupalchat-altrovr").show();
$("#drupalchat").hide();
}
}
});
};
return {
'init': init
};
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
...etc
现在 1.bundle.js 被修改为这个。我从浏览器控制台旁边的网络部分复制了它
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/terms/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:og="http://ogp.me/ns#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:sioc="http://rdfs.org/sioc/ns#"
xmlns:sioct="http://rdfs.org/sioc/types#"
xmlns:skos="http://www.w3.org/2004/02/skos/core#"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://web.iflychatdev.com:12000/websites/t3/misc/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortlink" href="/websites/t3/node/1" />
<link rel="canonical" href="/websites/t3/node/1" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<title>iflychat-require-app | T3</title>
<style type="text/css" media="all">
</style>
<style type="text/css" media="all">
</style>
<style type="text/css" media="all">
</style>
<style type="text/css" media="all">
@import
...etc
现在正常了吗？？该文件已更改
以及如何摆脱意外标记的错误<
p.s：我正在将我的应用程序从 requirejs 迁移到 webpack
webpack.config.js
var path = require('path');
module.exports = {
//our config
context: path.resolve(__dirname, 'require'),
entry: './iflychat-main',
output: {
path: path.resolve('./dist'),
filename: 'bundle.js'
},
resolve: {
modulesDirectories: ['.','./require/libs'],
},
}
主 js 文件 bundle.js 试图从 url 中以这种方式生成请求块：
script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
其中 __webpack_require__.p 是 webpack public 路径。
这意味着块将从相对于文档 (/websites/t3/node/) 的路径加载。但是由于您的文件位于 /websites/t3/iflychat-app/require/，因此无法正确加载块。
因此，解决方案是指定正确的 js 资产路径：
module.exports = {
...
output: {
path: path.resolve('./dist'),
publicPath: '/websites/t3/iflychat-app/require/',
filename: 'bundle.js'
},
...
}