我正在使用webpack构建一个简单的应用程序来组合我所有的模块。我的网络包似乎正在运行(尽管我已经与它的不工作作斗争(。 现在它看起来像一个捆绑包.js无法找到查看我的应用程序所必需的。我收到此错误:
错误
所以这是我可能导致问题的文件
配置.webpack.js文件
我的包JSON
{
"name": "quiz",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "mocha specs"
},
"author": "",
"license": "ISC",
"devDependencies": {
"mocha": "^3.4.2",
"webpack": "1.12.15"
}
}
以及查找捆绑包.js文件的 HTML 文件
<!DOCTYPE html>
<html>
<head>
<title>Quiz game</title>
</head>
<body>
<script src = "build.js "></script>
<div>
Quiz game
</div>
</body>
</html>
关于可能出现什么问题的任何想法?
首先,
也许,您可以稍微更改一下项目结构,因为默认情况下,webpack cli 会在根文件夹下找到 webpack.config.js 文件。
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
第二 您可以更改您的 webpack.config.js通过需要路径来清楚地指出输出路径:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
第三
如果您的索引.html与 bundle 位于同一文件夹下.js在 dist 文件夹中,
<script src="bundle.js"></script>
是正确的。但是把它放在正文的底部,这样它就不会阻塞渲染,并且可以在页面加载时操作 DOM。
<!DOCTYPE html>
<html>
<head>
<title>Quiz game</title>
</head>
<body>
<div>
Quiz game
</div>
<script src="build.js"></script>
</body>
</html>
您的问题是找不到build.js文件,因为索引中文件的路径.html错误,它应该在您的索引中<script src = "/build.js "></script>
.html而不是<script src = "build.js "></script>
您的问题是文件的构建.js路径。
你只错过了一小部分。
试试这个: 在你的"构建.js之前在你的src中放置一个/。