react-webpack-starter-kit's Introduction

Simple webpack boilerplate

A ready to use simple webpack boilerplate.

Instructions

Clone this repo
Run npm install
Run npm start, localhost:8080 will open up in your default browser

If you prefer to install things yourself you can follow the instructions below

Install the following:

npm install -g webpack webpack-cli
npm install

Update your scripts to the following:

"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"

Create .babelrc file with the following configurations:

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

Create webpack.config.js file with the following configurations:

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

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

Create src folder with index.js and index.html file.
index.js should have:

import React from 'react';
import ReactDOM from 'react-dom';

const Index = () => {
  let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // { a: 3, b: 4 }
  [5, 6].map((n) => console.log(n));
  return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('index'));

index.html should have:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React and Webpack4</title>
</head>
<body>
  <section id="index"></section>
</body>
</html>