Setting up Webpack

To allow our source js and jsx code to exist in multiple files instead of a single file, we use a bundler called webpack. (This is also crucial for letting us use React Router.) To set up webpack, you basically need to install a bunch of node modules and create a config file. In more detail:

Run the following commands from the top level of your copy of this repo (you can skip any modules that are already installed):

npm install webpack -g
npm install babel-core
npm install babel-preset-react
npm install babel-loader
npm install babel-preset-es2015
npm install react

Create the config file webpack.config.js in the top level of your copy of this repo, with the following content:

var path = require('path');

module.exports = {
  entry: './jsx/text_display.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'jsx')
  },
  module: {
    loaders: [{
      test: /\.jsx$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

Edit index.html by replacing the line <script type="text/jsx" src="jsx/text_display.jsx"></script> with <script src="jsx/bundle.js"></script>.

Then, run webpack to compile/bundle the site, and you should be able to visit the site by opening index.html as you would normally do. You'll need to run webpack after every time you make changes to the js and jsx files for the site.