webpack产生未捕获的SyntaxError:意外令牌<bundle.js:1

时间:2018-08-16 16:56:03

标签: javascript webpack bundle

我对这个问题可能有些困惑。我已经删除了bundle.js,以为通过创建一个新的bundle.js可以解决该问题(有人在另一个问题中指出了问题),但是那没有发生。我收到的错误是

Uncaught SyntaxError: Unexpected token < bundle.js:1

指向

<!DOCTYPE html>

我见过其他形式的人提到此错误与html文件的404返回有关。我希望有人可以告诉我我的webpack输出是否错误。在我的html文件中,我有

 <script type="text/javascript" src="../src/javascripts/bundle.js"></script>

我的webpack是

let path = require("path");
let webpack = require("webpack");

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./index.js",
  module: {
    rules: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react", "env"],
            plugins: ["emotion"]
          }
        }
      },
      {
        test: [/\.scss$/, /\.css$/],
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.svg$/,
        loader: "svg-inline-loader"
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader",
            options: {
              bypassOnDebug: true,
              disable: true
            }
          }
        ]
      },
      {
        test: /\.csv$/,
        loader: "csv-loader",
        options: {
          dynamicTyping: true,
          header: true,
          skipEmptyLines: true
        }
      },
      {
        test: /\.ttf$/,
        use: [
          {
            loader: "ttf-loader",
            options: {
              name: "./font/[hash].[ext]"
            }
          }
        ]
      }
    ]
  },
  resolve: { extensions: [".js", ".jsx", ".scss", ".png"] },
  output: {
    path: __dirname + "/src/javascripts",
    filename: "bundle.js"
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("production")
    })
  ]
};

如果有人曾经看过此书并找到了解决方案。我很想学习为什么会发生这种情况以及将来如何避免这种情况。

再次感谢您的所有帮助和指导。

[更新]

这是错误的图像,以及当我单击bundle.js:1时显示的错误

Image showing error

下面的图片是我的网络

Network

[更新!!!] 我一直想知道为什么我看到了两束,发现体内的束有错误的路径。有人知道这是哪里来的吗?我在mny html文件中看不到它。这是它的图像 enter image description here

1 个答案:

答案 0 :(得分:0)

您可能在HTML页面中引用了磁盘上不存在的本地js或ts文件。

<script src="doesThisFileExist.js"></script>