Version 2.0

.babelrc

@@ -1,29 +1,43 @@
 {
   "env": {
-    // Compatibility Profile. ES5 output and CommonJS module format.
-    "commonjs": {
+    // Compatibility Profile.
+    // ES5 output and CommonJS module format.
+    "es5_cjs": {
       "presets": [
-        ["env", {
-          "useBuiltIns": false
-        }],
-        "react"
+        "@babel/preset-env",
+        "@babel/preset-react"
       ]
     },
-    // Future Profile. ES6 output and module syntax.
+    // Future Profile.
+    // ES6 output with no module transformation (ES Modules syntax).
     "es": {
       "presets": [
-        ["env", {
-          "useBuiltIns": false,
+        ["@babel/preset-env", {
           "modules": false,
           "targets": {
             "node": "6.5"
           }
         }],
-        "react"
+        "@babel/preset-react"
+      ]
+    },
+    // Bundled Profile.
+    // ES5 output and UMD module format.
+    "umd": {
+      "presets": [
+        ["@babel/preset-env", {
+          "modules": false,
+        }],
+        "@babel/preset-react"
       ]
     },
+    // Jest Profile.
+    // To be used by jest tests.
     "test": {
-      "presets": ["env", "react"]
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+      ]
     }
   }
 }

.gitignore

@@ -1,12 +1,30 @@
-node_modules
-.DS_Store
-dist/
-typings/
-*.orig
+# Common aux folders
+.awcache/
+.vscode/
 .idea/
-*/src/**/*.js.map
-yarn.lock
-*.log
+.cache/
+
+# Dependencies & Build
+node_modules/
+build/
 lib/
+dist/
 es/
+
+# Aux files
+*.cer
+*.log
+*/src/**/*.orig
+*/src/**/*.js.map
+
+# Win
+desktop.ini
+
+# MacOs
+.DS_Store
+
+# Yarn
+yarn.lock
+
+# NPM
 package-lock.json

.vscode/launch.json

@@ -1,17 +1,48 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Jest single run",
-      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
-      "args": [
-        "--verbose",
-        "-i"
-      ],
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen"
-    },
-  ]
-}
+
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest single run",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "args": [
+        "--verbose",
+        "-i",
+        "--no-cache"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest watch run",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "args": [
+        "--verbose",
+        "-i",
+        "--no-cache",
+        "--watchAll"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest current file",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "args": [
+        "${fileBasename}",
+        "--verbose",
+        "-i",
+        "--no-cache",
+        "--watchAll"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

config/test/polyfills.js

@@ -0,0 +1,2 @@
+// Polyfill requestAnimationFrame required by React >=16.0.0
+require('raf/polyfill');

config/webpack/helpers.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+// String helpers
+const capitalizeString = s => s.charAt(0).toUpperCase() + s.slice(1);
+const camelCaseString = dashedName => dashedName.split("-").map(
+  (s, i) => i > 0 ? capitalizeString(s) : s
+).join("");
+
+// Name helpers
+const packageName = process.env.npm_package_name;
+const packageNameCamelCase = camelCaseString(packageName);
+const version = JSON.stringify(process.env.npm_package_version).replace(/"/g, '');
+const getBundleFileName = min => `${packageName}-${version}${min ? ".min" : ''}.js`;
+
+// Path helpers
+const rootPath = path.resolve(__dirname, "../..");
+const resolveFromRootPath = (...args) => path.join(rootPath, ...args);
+
+// Export constants
+exports.srcPath = resolveFromRootPath("src");
+exports.buildPath = resolveFromRootPath("build",);
+exports.distPath = resolveFromRootPath("build", "dist");
+exports.version = version;
+exports.packageNameCamelCase = packageNameCamelCase;
+exports.getBundleFileName = getBundleFileName;

config/webpack/webpack.common.js

@@ -0,0 +1,30 @@
+const helpers = require('./helpers');
+
+module.exports = (env, argv) => {
+  const minimizeBundle = Boolean(argv['optimize-minimize']);
+
+  return {
+    entry: ['./src/index.js'],
+    output: {
+      path: helpers.distPath,
+      filename: helpers.getBundleFileName(minimizeBundle),
+      library: helpers.packageNameCamelCase,
+      libraryTarget: 'umd',
+    },
+    externals: {
+      react: 'react',
+    },
+    optimization: {
+      minimize: minimizeBundle,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+        },
+      ],
+    },
+  };
+};

config/webpack/webpack.dev.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = (env, argv) => merge(commonConfig(env, argv), {
+  mode: 'development',
+  devtool: 'inline-source-map',
+});

config/webpack/webpack.prod.js

@@ -0,0 +1,17 @@
+const merge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = (env, argv) => merge(commonConfig(env, argv), {
+  mode: 'production',
+  devtool: 'none',
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      openAnalyzer: false,
+      reportFilename: "report/report.html",
+    }),
+    new CompressionPlugin(),
+  ],
+});

examples/00-example-basic/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}

examples/00-example-basic/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "webpack-by-example",
+  "version": "1.0.0",
+  "description": "In this sample we are going to setup a web project that can be easily managed\r by webpack.",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open",
+    "build": "rimraf dist && webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "rimraf": "^2.6.3",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "dependencies": {
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-loader-spinner": "^2.3.0",
+    "react-promise-tracker": "file:../../build"
+  }
+}

examples/00-example-basic/src/api/fetch.js

@@ -0,0 +1,12 @@
+export const fetchWithDelay = (url) => {
+  const promise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(fetch(url, {
+        method: 'GET',
+      })
+        .then((response) => response.json()));
+    }, 3000)
+  });
+
+  return promise;
+}

examples/00-example-basic/src/api/postAPI.js

@@ -0,0 +1,9 @@
+import { fetchWithDelay } from './fetch';
+const url = 'https://jsonplaceholder.typicode.com/posts';
+
+const fetchPosts = () => fetchWithDelay(url)
+  .then((posts) => posts.slice(0, 10));
+
+export const postAPI = {
+  fetchPosts,
+};

examples/00-example-basic/src/api/userAPI.js

@@ -0,0 +1,8 @@
+import { fetchWithDelay } from './fetch';
+const url = 'https://jsonplaceholder.typicode.com/users';
+
+const fetchUsers = () => fetchWithDelay(url);
+
+export const userAPI = {
+  fetchUsers,
+};

examples/00-example-basic/src/app.css

@@ -0,0 +1,11 @@
+.tables {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.tables > div {
+  flex-basis: 50%;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}