[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n}\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"parser\": \"babel-eslint\",\n  \"env\": {\n    \"browser\": true,\n    \"es6\": true,\n    \"node\": true\n  },\n  \"extends\": [\"airbnb\", \"prettier\"],\n  \"plugins\": [\"prettier\"],\n  \"rules\": {\n    \"prettier/prettier\": [\"error\"],\n    \"import/no-extraneous-dependencies\": 0,\n    \"react/jsx-filename-extension\": 0\n  }\n}\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: rwieruch\npatreon: # rwieruch\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with a single custom sponsorship URL\n"
  },
  {
    "path": ".gitignore",
    "content": "dist/*\nnode_modules/*"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"singleQuote\": true,\n  \"printWidth\": 70\n}"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\n\nnode_js:\n  - stable\n\ninstall:\n  - npm install\n\nscript:\n  - npm test"
  },
  {
    "path": "README.md",
    "content": "# advanced-react-webpack-babel-setup\n\n[![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/)\n\nAdvanced React with Webpack Setup. How to set it up yourself:\n\n- [Minimal React + Webpack Setup](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/)\n- [Advanced Webpack Setup](https://www.robinwieruch.de/webpack-advanced-setup-tutorial/)\n- [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/)\n\n[![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)\n\n## Features\n\n- React 16\n- Webpack 5\n- Babel 7\n- Hot Module Replacement\n- Dev + Production Builds\n- Dist Folder Managagement by Webpack\n- Common and environment specific Webpack Configuration\n- Composition of Webpack Configuration\n- Source Maps\n- Environment Variables\n- Webpack Add-Ons\n- ESLint + Prettier\n\n## DIY Add-Ons\n\n- [SVG Icons](https://www.robinwieruch.de/react-svg-icon-components/)\n- [CSS Modules](https://www.robinwieruch.de/react-css-modules/)\n- [Fonts Support](https://www.robinwieruch.de/webpack-font/)\n- [Images Support](https://www.robinwieruch.de/webpack-images/)\n- [Docker](https://www.robinwieruch.de/docker-react-development)\n\n## Alternatives\n\n- [Minimal React Webpack Babel Setup](https://github.com/rwieruch/minimal-react-webpack-babel-setup)\n\n## Installation\n\n- `git clone git@github.com:rwieruch/advanced-react-webpack-babel-setup.git`\n- cd advanced-react-webpack-babel-setup\n- npm install\n- npm start\n- visit `http://localhost:8080/`\n"
  },
  {
    "path": "build-utils/addons/webpack.bundleanalyze.js",
    "content": "const path = require('path');\nconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\nmodule.exports = {\n  plugins: [\n    new BundleAnalyzerPlugin({\n      analyzerMode: 'static',\n      reportFilename: path.resolve(\n        __dirname,\n        '..',\n        '..',\n        './dist/report.html'\n      ),\n      openAnalyzer: false,\n    }),\n  ],\n};\n"
  },
  {
    "path": "build-utils/webpack.common.js",
    "content": "const path = require('path');\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  entry: path.resolve(__dirname, '..', './src/index.js'),\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/,\n        exclude: /node_modules/,\n        use: ['babel-loader', 'eslint-loader'],\n      },\n    ],\n  },\n  resolve: {\n    extensions: ['*', '.js', '.jsx'],\n  },\n  plugins: [\n    new CleanWebpackPlugin(),\n    new HtmlWebpackPlugin({\n      title: 'Advanced React with Webpack Setup',\n      template: path.resolve(__dirname, '..', './src/index.html'),\n    }),\n  ],\n  output: {\n    path: path.resolve(__dirname, '..', 'dist'),\n    filename: 'bundle.js',\n  },\n};\n"
  },
  {
    "path": "build-utils/webpack.config.js",
    "content": "/* eslint-disable global-require */\n/* eslint-disable import/no-dynamic-require */\n\nconst { merge } = require('webpack-merge');\n\nconst commonConfig = require('./webpack.common.js');\n\nconst getAddons = (addonsArgs) => {\n  const addons = Array.isArray(addonsArgs)\n    ? addonsArgs\n    : [addonsArgs];\n\n  return addons\n    .filter(Boolean)\n    .map((name) => require(`./addons/webpack.${name}.js`));\n};\n\nmodule.exports = ({ env, addon }) => {\n  const envConfig = require(`./webpack.${env}.js`);\n\n  return merge(commonConfig, envConfig, ...getAddons(addon));\n};\n"
  },
  {
    "path": "build-utils/webpack.dev.js",
    "content": "const path = require('path');\nconst webpack = require('webpack');\nconst Dotenv = require('dotenv-webpack');\n\nmodule.exports = {\n  mode: 'development',\n  plugins: [\n    new webpack.HotModuleReplacementPlugin(),\n    new Dotenv({\n      path: path.resolve(__dirname, '..', './.env.development'),\n    }),\n  ],\n  devServer: {\n    contentBase: path.resolve(__dirname, '..', './dist'),\n    hot: true,\n  },\n  devtool: 'eval-source-map',\n};\n"
  },
  {
    "path": "build-utils/webpack.prod.js",
    "content": "const path = require('path');\nconst Dotenv = require('dotenv-webpack');\n\nmodule.exports = {\n  mode: 'production',\n  plugins: [\n    new Dotenv({\n      path: path.resolve(__dirname, '..', './.env.production'),\n    }),\n  ],\n  devServer: {\n    contentBase: path.resolve(__dirname, '..', './dist'),\n  },\n  devtool: 'source-map',\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"advanced-react-webpack-babel-setup\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"webpack serve --config build-utils/webpack.config.js --env env=dev\",\n    \"build\": \"webpack --config build-utils/webpack.config.js --env env=prod\",\n    \"build:analyze\": \"npm run build -- --env addon=bundleanalyze\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 0\"\n  },\n  \"keywords\": [],\n  \"author\": \"Robin Wieruch <opensource@rwieruch.com> (https://www.robinwieruch.de)\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.12.3\",\n    \"@babel/preset-env\": \"^7.12.1\",\n    \"@babel/preset-react\": \"^7.12.1\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"babel-loader\": \"^8.1.0\",\n    \"clean-webpack-plugin\": \"^3.0.0\",\n    \"dotenv-webpack\": \"^5.0.0\",\n    \"eslint\": \"^7.12.1\",\n    \"eslint-config-airbnb\": \"^18.2.0\",\n    \"eslint-config-prettier\": \"^6.15.0\",\n    \"eslint-loader\": \"^4.0.2\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-prettier\": \"^3.1.4\",\n    \"eslint-plugin-react\": \"^7.21.5\",\n    \"html-webpack-plugin\": \"^4.5.0\",\n    \"prettier\": \"^2.1.2\",\n    \"react-hot-loader\": \"^4.13.0\",\n    \"webpack\": \"^5.3.2\",\n    \"webpack-bundle-analyzer\": \"^3.9.0\",\n    \"webpack-cli\": \"^4.1.0\",\n    \"webpack-dev-server\": \"^3.11.0\",\n    \"webpack-merge\": \"^5.3.0\"\n  },\n  \"dependencies\": {\n    \"prop-types\": \"^15.7.2\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  }\n}\n"
  },
  {
    "path": "sandbox.config.json",
    "content": "\n{\n  \"template\": \"node\"\n}\n"
  },
  {
    "path": "src/App.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst App = ({ title }) => <div>{title}</div>;\n\nApp.propTypes = {\n  title: PropTypes.string.isRequired,\n};\n\nexport default App;\n"
  },
  {
    "path": "src/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title><%= htmlWebpackPlugin.options.title %></title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "src/index.js",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from './App';\n\nconst title = 'React with Webpack and Babel';\n\nReactDOM.render(\n  <App title={title} />,\n  document.getElementById('app')\n);\n\nmodule.hot.accept();\n"
  }
]