reactjs應用中的意外令牌<bundle js

Question

我正在從頭開始創建js應用，這是我的webpack配置文件

import path from 'path';

export default {

  entry: path.join(__dirname,'/client/index.js'),
  output: {
    path: '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname,'client'),
        loaders: ['babel-loader'],

      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  }
}

這是我的.babelrc文件：

{
  "presets": ["es2015", "react"]
}

這是我的index.html file ：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="root"></div>

    <script src="bundle.js"></script>
  </body>
</html>

這是我的client/index.js

import React from 'react';
import { render } from 'react-dom';
import App from './Component/App';

render(<App />, document.getElementById("root"));

這是我的應用程序組件

import React from 'react';

export default () => {
  return <h1>Hello from react</h1>;
}

這是應用程序使用的依賴項

{
  "dependencies": {
    "express": "^4.15.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "nodemon": "^1.11.0",
    "webpack": "^3.2.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.5.1"
  }
}

構建成功，但是運行該應用程序后出現錯誤Unexpected token < bundle.js:1 ，有人知道是什么原因引起的錯誤嗎？ 謝謝

Answer 1

在輸出中將文件名添加到您的webpack.config中：

entry: path.join(__dirname,'/client/index.js'),
output: {
  path: '/',
  filename: 'bundle.js'
}

基本上這是因為在index.html中，您正在導入bundle.js

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

但是您的webpack正在輸出index.js，通過添加filename屬性，webpack現在將輸出bundle.js

reactjs應用中的意外令牌<bundle js

問題描述

1 個解決方案

解決方案1
1 已采納 2017-07-13 09:38:18

reactjs應用中的意外令牌&lt;bundle js

問題描述

1 個解決方案

解決方案1 1 已采納 2017-07-13 09:38:18

reactjs應用中的意外令牌<bundle js

解決方案1
1 已采納 2017-07-13 09:38:18