simple_webpack_boilerplate

by pinglinh

🕸📦Ever wondered how you could set up a React project from scratch? This is the repo for you! I hav...

198 Stars 80 Forks Last release: Not found 12 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Simple webpack boilerplate

A ready to use simple webpack boilerplate.

Instructions

  1. Clone this repo
  2. Run
    npm install
  3. 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

  1. 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
  2. Install the following dependencies:
    npm i react react-dom -S
    
  3. 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
    
  4. Update your scripts to the following:
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
    
  5. Create .babelrc file with the following configurations:
    {
    "presets": ["env", "react"]
    }
    
  6. 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: /nodemodules/, 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] };

7. Create **src** folder with **index.js** and **index.html** file.
8. **index.js** should have:
import React from "react"; import ReactDOM from "react-dom";

const Index = () => { return

Hello React!
; };

ReactDOM.render(, document.getElementById("index"));

9. **index.html** should have:
<!DOCTYPE html> React and Webpack4

``` 10. Create .gitignore file and input /node_modules/ and /dist.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.