jrenelg / simple_webpack_boilerplate Goto Github PK

View Code? Open in Web Editor NEW

🕸📦Ever wondered how you could set up a React project from scratch? This is the repo for you! I have also written up a blog tutorial to follow along.

HTML 23.08% JavaScript 76.92%

simple_webpack_boilerplate'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

Run npm init and type your answers to the questions or you can run npm init -y to say yes to every question - you will get default settings
Install the following dependencies:

npm i react react-dom -S

Install the following dev dependencies:

npm i babel-core babel-loader babel-preset-env babel-preset-react css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server -D

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 HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  plugins: [htmlWebpackPlugin]
};

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 = () => {
  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>