的WebPack產生反應的HTML標籤構建引發錯誤

我得到我每次運行NPM開始時間錯誤，這裏是我的錯誤....的WebPack產生反應的HTML標籤構建引發錯誤

ERROR in ./app/App.js 
Module build failed: SyntaxError: Unexpected token (8:3) 

    6 | render() { 
    7 |  return (
> 8 |   <div> 
    |  ^
    9 |    Testing this 
    10 |   </div> 
    11 |  )

這裏面一個簡單的反應成分。出於某種原因，html標記在我的構建中導致錯誤。下面是我的webpack.config.js和包json文件。

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/App.js' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: "bundle.js" 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
     inline:true, 
     contentBase: './public', 
     port: 3333 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
     }, 
     { 
       test: /\.scss$/, 
       loader: 'style!css!sass' 
      }] 
    } 
};

包JSON

{ 
    "name": "lr", 
    "version": "1.0.0", 
    "description": "", 
    "main": "App.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "sam", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "css-loader": "^0.26.1", 
    "html-webpack-plugin": "^2.25.0", 
    "sass": "^0.5.0", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.14.0", 
    "webpack-dev-server": "^1.16.2" 
    }, 
    "dependencies": { 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "react-hot-loader": "^1.3.1", 
    "react-router": "^3.0.0" 
    } 
}

不知道爲什麼HTML標籤是引發錯誤。

來源

2017-01-02 user3622460

您需要通知webpack您還希望它使用.jsx擴展名。嘗試更新您的測試模式：

{ 
    test : /\.(js|jsx)$/, 
    loaders: ['babel'], 
    include: path.join(__dirname, 'src') 
}

你還需要一個.babelrc文件，然後通知babel你想如何進行編譯：

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

在這裏有一個偷看了工作實現： https://github.com/mikechabot/react-boilerplate

來源

2017-01-02 20:07:23 lux

多數民衆贊成它 - 我完全忘了添加babel文件 – user3622460

的WebPack產生反應的HTML標籤構建引發錯誤

回答

相關問題