reactjs - LocalHost8080 error page -


when run following script npm run dev localhost output current file structure. instead need render welcome component. trying identify root cause, whether webpack.config.js, project architecture, etc. here webpack.config.js file

var webpack = require('webpack'); var path = require('path'); var extracttextplugin = require("extract-text-webpack-plugin");  module.exports = {  context: path.join(__dirname, "src"),  entry: "./main.js",  module: {  loaders: [   {     test: /\.jsx?$/,     exclude: /node_modules/,     loader: 'babel-loader',     query: {       presets: ['react', 'es2015']     }   },   {     test: /\.scss$/,     use: extracttextplugin.extract({       fallback: 'style-loader',       use:['css-loader', 'sass-loader'],       publicpath: './dist'     })    }  ] },  output: {  path: path.resolve(__dirname, "./dist"),  filename: "[name].bundle.js", }, devserver: {   contentbase: path.join(__dirname, "./dist"),   hot: true,   inline: true, }, plugins:[   new webpack.hotmodulereplacementplugin()  ] };

package.json dev:"webpack-dev-server --inline --content-base dist/ --hot"

project architecture project

main.js

import react "react"; import reactdom "react-dom";    import welcome "./components/welcome";  const app = document.getelementbyid('app');  reactdom.render(<welcome/>, app);

welcome.js

import react "react";  export default class welcome extends react.component { render() { return (   <div>     <h4>welcome component</h4>   </div>   );  } }

main.html

<!doctype html> <html>   <head>     <meta charset="utf-8">     <title>react app</title>   </head>    <body>     <div id="app"></div>     <script src="main.bundle.js"></script>   </body> </html>

localhost output localhost:8080

terminal

try add publicpath: '/dist/', in devserver object in webpack config or replace main.html root directory.


Comments

Post a Comment