意外標記<在reactjs應用

我正在從頭開始創建JS應用程序捆綁JS，這是我的WebPack配置文件意外標記<在reactjs應用

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，人知道什麼是造成錯誤？感謝

來源

2017-07-13 Mamen

請對您的問題[MCVE]。如果沒有項目的所有相關部分，這不能被複制。特別是，我們不知道'client/index.js'中的內容，這可能是破壞軟件包的原因。 –

編輯.. @ E_net4 – Mamen

文件名添加到您的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，通過添加文件名屬性，webpack現在將輸出bundle.js

來源

2017-07-13 09:38:18 enzoborgfrantz

運行後出現此錯誤， '''配置有一個未知屬性'文件名'。這些屬性是有效的： object {amd？，bail？，cache ?, context？，dependencies ?, devServer ?, devtool？，entry，externals ?, loader ?, module ?, name ?, node ?, output ?, performance ？，插件？，配置文件？，recordsInputPath？，recordsOutputPath ?, recordsPath？，resolve？，resolveLoader？，stats？，target ?, watch ?, watchOptions？ } 對於錯別字：請糾正它們.''' – Mamen

哦，這是我的不好，我把它直接放在輸出下，它應該在輸出對象內，非常感謝你 – Mamen

偉大的:)將編輯我的答案，使它更清晰 – enzoborgfrantz

意外標記<在reactjs應用

回答

相關問題