Webpack and Reactjs app not loading html

Question

I'm trying to build an app with reactjs+webpack+babel. My webpack.config.js is:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/bin');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
    context: APP_DIR,
  entry: {
      vendor: ['react', 'react-dom'],
      app: APP_DIR + '/index.jsx'
  },
  resolve: {
    extensions: [".webpack.js", ".web.js", ".js", ".jsx"]
  },
  output: {
    path: BUILD_DIR,
    filename: '[name].js'
  },
  devServer: {
    inline:true,
    port: 9000
  },
  module : {
    loaders : [
        {
            test : /\.jsx?/,
            exclude: /node_modules/,
            include : APP_DIR,
            loader : 'babel-loader', 
            query: {
                presets: ['react', 'es2015']
            }
        }
    ]
  }
};

module.exports = config;

Then my index.jsx is:

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

And my html file:

<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app"></div>
    <script async src="bin/bundle.js" type="text/javascript"></script>
  </body>
</html>

And this html is in the bin folder. What am I doing wrong, so when I open throw browser (and webpack server) I don't have that html.

EDIT:

{
  "main": "index.jsx",
  "scripts": {
    "start": "webpack-dev-server --inline --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "André Roque Nº31260",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.9",
    "react-dom": "^0.14.9",
    "react-router": "^4.1.1",
    "webpack": "^2.5.1"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.5.1"
  }
}

Answer 1

Try serving the contentBase to the devServer from the folder in which the html file is present with you bundled script. You should provide path to the webpack-dev-server such as following example:

devServer: {
    contentBase: path.resolve(__dirname, 'src/client/bin'),
    inline:true,
    port: 9000
  },

Hope this helps.

Webpack and Reactjs app not loading html

Question

1 answers

solution1
0 2018-05-12 11:56:44

Webpack and Reactjs app not loading html

Question

1 answers

solution1 0 2018-05-12 11:56:44

solution1
0 2018-05-12 11:56:44