feat(footer): add SiteFooter component

2019-01-02 15:27:41 -05:00
parent abc3a38e77
commit c93ec1405c
25 changed files with 28409 additions and 1 deletions
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -0,0 +1,115 @@
+// This is the dev Webpack config. All settings here should prefer a fast build
+// time at the expense of creating larger, unoptimized bundles.
+const Merge = require('webpack-merge');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+const commonConfig = require('./webpack.common.config.js');
+
+module.exports = Merge.smart(commonConfig, {
+  mode: 'development',
+  entry: [
+    // enable react's custom hot dev client so we get errors reported in the browser
+    require.resolve('react-dev-utils/webpackHotDevClient'),
+    path.resolve(__dirname, '../src/index.jsx'),
+  ],
+  module: {
+    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
+    rules: [
+      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
+      // Babel is configured with the .babelrc file at the root of the project.
+      {
+        test: /\.(js|jsx)$/,
+        include: [
+          path.resolve(__dirname, '../src'),
+        ],
+        loader: 'babel-loader',
+        options: {
+          // Caches result of loader to the filesystem. Future builds will attempt to read from the
+          // cache to avoid needing to run the expensive recompilation process on each run.
+          cacheDirectory: true,
+        },
+      },
+      // We are not extracting CSS from the javascript bundles in development because extracting
+      // prevents hot-reloading from working, it increases build time, and we don't care about
+      // flash-of-unstyled-content issues in development.
+      {
+        test: /(.scss|.css)$/,
+        use: [
+          'style-loader', // creates style nodes from JS strings
+          {
+            loader: 'css-loader', // translates CSS into CommonJS
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader', // compiles Sass to CSS
+            options: {
+              sourceMap: true,
+              includePaths: [
+                path.join(__dirname, '../node_modules'),
+                path.join(__dirname, '../src'),
+              ],
+            },
+          },
+        ],
+      },
+      // Webpack, by default, uses the url-loader for images and fonts that are required/included by
+      // files it processes, which just base64 encodes them and inlines them in the javascript
+      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
+      // file-loader instead to copy the files directly to the output directory.
+      {
+        test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader',
+      },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
+  plugins: [
+    // Generates an HTML file in the output directory.
+    new HtmlWebpackPlugin({
+      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
+      template: path.resolve(__dirname, '../public/index.html'),
+    }),
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development',
+    }),
+    // when the --hot option is not passed in as part of the command
+    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
+    // https://webpack.js.org/configuration/dev-server/#devserver-hot
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+  // This configures webpack-dev-server which serves bundles from memory and provides live
+  // reloading.
+  devServer: {
+    host: '0.0.0.0',
+    port: 3000,
+    historyApiFallback: true,
+    hot: true,
+    inline: true,
+  },
+});