Repository: rwieruch/advanced-react-webpack-babel-setup
Branch: master
Commit: 9ffa4811463b
Files: 17
Total size: 7.4 KB

Directory structure:
gitextract_xu0pk7sc/

├── .babelrc
├── .eslintrc
├── .github/
│   └── FUNDING.yml
├── .gitignore
├── .prettierrc
├── .travis.yml
├── README.md
├── build-utils/
│   ├── addons/
│   │   └── webpack.bundleanalyze.js
│   ├── webpack.common.js
│   ├── webpack.config.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
├── package.json
├── sandbox.config.json
└── src/
    ├── App.js
    ├── index.html
    └── index.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}


================================================
FILE: .eslintrc
================================================
{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "import/no-extraneous-dependencies": 0,
    "react/jsx-filename-extension": 0
  }
}


================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms

github: rwieruch
patreon: # rwieruch
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with a single custom sponsorship URL


================================================
FILE: .gitignore
================================================
dist/*
node_modules/*

================================================
FILE: .prettierrc
================================================
{
  "singleQuote": true,
  "printWidth": 70
}

================================================
FILE: .travis.yml
================================================
language: node_js

node_js:
  - stable

install:
  - npm install

script:
  - npm test

================================================
FILE: README.md
================================================
# advanced-react-webpack-babel-setup

[![Build Status](https://travis-ci.org/rwieruch/advanced-react-webpack-babel-setup.svg?branch=master)](https://travis-ci.org/rwieruch/advanced-react-webpack-babel-setup) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/advanced-react-webpack-babel-setup.svg)](https://greenkeeper.io/)

Advanced React with Webpack Setup. How to set it up yourself:

- [Minimal React + Webpack Setup](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/)
- [Advanced Webpack Setup](https://www.robinwieruch.de/webpack-advanced-setup-tutorial/)
- [ESLint](https://www.robinwieruch.de/webpack-eslint/) + [ESLint + React](https://www.robinwieruch.de/react-eslint-webpack-babel/) + [Prettier + ESLint](https://www.robinwieruch.de/prettier-eslint/)

[![Edit advanced-react-webpack-babel-setup](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/rwieruch/advanced-react-webpack-babel-setup/tree/master/?fontsize=14)

## Features

- React 16
- Webpack 5
- Babel 7
- Hot Module Replacement
- Dev + Production Builds
- Dist Folder Managagement by Webpack
- Common and environment specific Webpack Configuration
- Composition of Webpack Configuration
- Source Maps
- Environment Variables
- Webpack Add-Ons
- ESLint + Prettier

## DIY Add-Ons

- [SVG Icons](https://www.robinwieruch.de/react-svg-icon-components/)
- [CSS Modules](https://www.robinwieruch.de/react-css-modules/)
- [Fonts Support](https://www.robinwieruch.de/webpack-font/)
- [Images Support](https://www.robinwieruch.de/webpack-images/)
- [Docker](https://www.robinwieruch.de/docker-react-development)

## Alternatives

- [Minimal React Webpack Babel Setup](https://github.com/rwieruch/minimal-react-webpack-babel-setup)

## Installation

- `git clone git@github.com:rwieruch/advanced-react-webpack-babel-setup.git`
- cd advanced-react-webpack-babel-setup
- npm install
- npm start
- visit `http://localhost:8080/`


================================================
FILE: build-utils/addons/webpack.bundleanalyze.js
================================================
const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: path.resolve(
        __dirname,
        '..',
        '..',
        './dist/report.html'
      ),
      openAnalyzer: false,
    }),
  ],
};


================================================
FILE: build-utils/webpack.common.js
================================================
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, '..', './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Advanced React with Webpack Setup',
      template: path.resolve(__dirname, '..', './src/index.html'),
    }),
  ],
  output: {
    path: path.resolve(__dirname, '..', 'dist'),
    filename: 'bundle.js',
  },
};


================================================
FILE: build-utils/webpack.config.js
================================================
/* eslint-disable global-require */
/* eslint-disable import/no-dynamic-require */

const { merge } = require('webpack-merge');

const commonConfig = require('./webpack.common.js');

const getAddons = (addonsArgs) => {
  const addons = Array.isArray(addonsArgs)
    ? addonsArgs
    : [addonsArgs];

  return addons
    .filter(Boolean)
    .map((name) => require(`./addons/webpack.${name}.js`));
};

module.exports = ({ env, addon }) => {
  const envConfig = require(`./webpack.${env}.js`);

  return merge(commonConfig, envConfig, ...getAddons(addon));
};


================================================
FILE: build-utils/webpack.dev.js
================================================
const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
  mode: 'development',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new Dotenv({
      path: path.resolve(__dirname, '..', './.env.development'),
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, '..', './dist'),
    hot: true,
  },
  devtool: 'eval-source-map',
};


================================================
FILE: build-utils/webpack.prod.js
================================================
const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  mode: 'production',
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, '..', './.env.production'),
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, '..', './dist'),
  },
  devtool: 'source-map',
};


================================================
FILE: package.json
================================================
{
  "name": "advanced-react-webpack-babel-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config build-utils/webpack.config.js --env env=dev",
    "build": "webpack --config build-utils/webpack.config.js --env env=prod",
    "build:analyze": "npm run build -- --env addon=bundleanalyze",
    "test": "echo \"Error: no test specified\" && exit 0"
  },
  "keywords": [],
  "author": "Robin Wieruch <opensource@rwieruch.com> (https://www.robinwieruch.de)",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "dotenv-webpack": "^5.0.0",
    "eslint": "^7.12.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "html-webpack-plugin": "^4.5.0",
    "prettier": "^2.1.2",
    "react-hot-loader": "^4.13.0",
    "webpack": "^5.3.2",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.3.0"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}


================================================
FILE: sandbox.config.json
================================================

{
  "template": "node"
}


================================================
FILE: src/App.js
================================================
import React from 'react';
import PropTypes from 'prop-types';

const App = ({ title }) => <div>{title}</div>;

App.propTypes = {
  title: PropTypes.string.isRequired,
};

export default App;


================================================
FILE: src/index.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>


================================================
FILE: src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const title = 'React with Webpack and Babel';

ReactDOM.render(
  <App title={title} />,
  document.getElementById('app')
);

module.hot.accept();