Question

我正在使用webpack构建一个简单的应用程序来组合我的所有模块。我的webpack似乎正在运行（尽管我已经在努力解决它的问题）。现在它看起来像是无法找到我的应用程序所必需的bundle.js。我收到这个错误：

所以这是我的文件可能导致问题

我的packageJSON

{
 "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"
 }
}

和查找bundle.js文件的html文件

<!DOCTYPE html>
<html>
<head>
    <title>Quiz game</title>
</head>
<body>
    <script src = "build.js "></script>
    <div>
    Quiz game
    </div>
</body>
</html>

关于可能出错的任何想法？

Answer 1

首先，

可能您可以稍微更改项目结构，因为默认情况下webpack cli会在根文件夹下找到webpack.config.js文件。

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

其次，您可以通过require path来更改webpack.config.js，以明确指出输出路径：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

第三，

如果您的index.html与dist文件夹中的bundle.js位于同一文件夹中，

 <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>

Answer 2

您的问题是无法找到build.js文件，因为index.html中文件的路径错误，应该是index.html中的<script src = "/build.js "></script>而不是<script src = "build.js "></script>

Answer 3

您的问题是该文件的build.js路径。

你只缺少一小部分。

试试这个：在你的“build.js”

之前放置一个/你的src

我的bundle.js似乎没有被创建

3 个答案: