当我使用webpack捆绑我的js文件时，
首先，当我在cmd上使用npm运行命令webpack时，会创建2个包文件，即bundle.js和1.bundle.js。创建2个bundle文件是否正常？
其次，当我在bundle.js中使用index.html时，它会被加载并且1.bundle.js也会被加载到页面上，但1.bundle.js会被修改为类似于各种各样的html文件脚本标签。这也是正常的吗？
第三，它在控制台中显示文件Uncaugh syntax error: Unexpected token <中1.bundle.js的错误，即当它读取1.bundle.js时，它开始读取包含在开头的<!DOCTYPE HTML>文件并显示<中<!DOCTYPE HTML>出乎意料的错误。任何帮助都将受到高度赞赏
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
现在是正常的吗？该文件被更改
如何消除意外令牌的错误＆lt;
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'],
},
}
答案 0 :(得分：4)
主js文件bundle.js尝试从这样生成的url请求块：
script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
其中__webpack_require__.p是webpack公共路径。
这意味着将从相对于文档（/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'
},
...
}