我正在使用AngularJS创建SPA。我将app.js作为webpack.config.js中的入口文件。我在本地下载了所有需要的库，并将它们与自定义的.js文件一起放在一个文件夹中。我正在尝试将它们导入app.js，这是我正在index.html中加载的文件。但每个文件我都会收到404错误：
这是app.js的样子：
import '../libraries/jquery';
import '../libraries/jqueryui';
import '../libraries/angular';
import '../libraries/angular-route';
import '../libraries/jquery-bxsilder';
import '../libraries/izimodal';
import '../css/blue.css';
import '../css/green.css';
import '../css/red.css';
import '../css/styles.css';
import '../css/stylesAbout.css';
import './controller';
import './functions';
这是我的webpack.config.js：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: 'bundleall.js'
},
devServer: {
port: 1950
},
module: {
rules: [{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.(gif|png|jpe?g|svg)/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlanced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true,
quality: 65
}
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
};
这是我的html文件：
<!DOCTYPE html>
<html>
<head>
<!--jquer UI-->
<link rel="stylesheet" href="./libraries/jqueryui.css">
<!--jquer Structure-->
<link rel="stylesheet" href="./libraries/jquery-ui-structure.css">
<!--jqui Theme css-->
<link rel="stylesheet" href="./libraries/jquery-ui-theme.css">
<!--izimodal css-->
<link rel="stylesheet" href="./libraries/izimodal.css">
<!--Font Awesome all-->
<link rel="stylesheet" href="./libraries/faminall.css">
<!--BXSlider-->
<link rel="stylesheet" href="./libraries/bxslider.css">
<!--Green-->
<link rel="stylesheet" type="text/css" href="./css/green.css" id="themes">
<!--My styles-->
<link rel="stylesheet" href="./css/styles.css">
</head>
// Here goes the body and stuff.
// And here I load the app.js
<script src="./src/app.js"></script>
</body>
</html>
这些是我在控制台中遇到的错误：
Unchecked runtime.lastError: The message port closed before a response was received.
app.js:1 Uncaught SyntaxError: Unexpected string
jquery-bxsilder.js:1653 Uncaught ReferenceError: jQuery is not defined
at eval (jquery-bxsilder.js:1653)
at Object../libraries/jquery-bxsilder.js (bundleall.js:206)
at __webpack_require__ (bundleall.js:20)
at eval (app.js:10)
at Module../src/app.js (bundleall.js:702)
at __webpack_require__ (bundleall.js:20)
at eval (webpack:///multi_(:1950/webpack)-dev-server/client?:2:18)
at Object.0 (bundleall.js:735)
at __webpack_require__ (bundleall.js:20)
at bundleall.js:84
(anonymous) @ jquery-bxsilder.js:1653
./libraries/jquery-bxsilder.js @ bundleall.js:206
__webpack_require__ @ bundleall.js:20
(anonymous) @ app.js:10
./src/app.js @ bundleall.js:702
__webpack_require__ @ bundleall.js:20
(anonymous) @ client:2
0 @ bundleall.js:735
__webpack_require__ @ bundleall.js:20
(anonymous) @ bundleall.js:84
(anonymous) @ bundleall.js:87
angular.js:139 Uncaught Error: [$injector:modulerr] Failed to instantiate module evalApp due to:
Error: [$injector:nomod] Module 'evalApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
https://errors.angularjs.org/1.7.8/$injector/modulerr?p0=evalApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'evalApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.8%2F%24injector%2Fnomod%3Fp0%3DevalApp%0A%20%20%20%20at%20eval%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A139%3A20)%0A%20%20%20%20at%20eval%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A2325%3A31)%0A%20%20%20%20at%20ensure%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A2246%3A46)%0A%20%20%20%20at%20module%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A2323%3A24)%0A%20%20%20%20at%20eval%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A5056%3A36)%0A%20%20%20%20at%20forEach%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A388%3A34)%0A%20%20%20%20at%20loadModules%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A5040%3A13)%0A%20%20%20%20at%20createInjector%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A4956%3A25)%0A%20%20%20%20at%20doBootstrap%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A1974%3A28)%0A%20%20%20%20at%20bootstrap%20(webpack%3A%2F%2F%2F.%2Flibraries%2Fangular.js%3F%3A1995%3A20)
at eval (angular.js:139)
at eval (angular.js:5080)
at forEach (angular.js:388)
at loadModules (angular.js:5040)
at createInjector (angular.js:4956)
at doBootstrap (angular.js:1974)
at bootstrap (angular.js:1995)
at angularInit (angular.js:1880)
at eval (angular.js:36514)
at HTMLDocument.trigger (angular.js:3537)
(anonymous) @ angular.js:139
(anonymous) @ angular.js:5080
forEach @ angular.js:388
loadModules @ angular.js:5040
createInjector @ angular.js:4956
doBootstrap @ angular.js:1974
bootstrap @ angular.js:1995
angularInit @ angular.js:1880
(anonymous) @ angular.js:36514
trigger @ angular.js:3537
3localhost/:1 GET http://localhost:1950/webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)