Adding react.

jasonraimondi · Aug 22, 2018 · 0a65922 · 0a65922
1 parent 1bee355
commit 0a65922
Show file tree

Hide file tree

Showing 16 changed files with 604 additions and 65 deletions.
diff --git a/build/postcss.config.ts b/build/postcss.config.ts
@@ -1,6 +1,8 @@
-import { mediaQueries, properties } from './variables';
+import { mediaQueries } from '../settings/variables';
+import { properties } from './variables';
 
 export default (loader) => [
+  require("postcss-easy-import"),
   require('postcss-cssnext')({
     features: {
       customProperties: { variables: properties },

diff --git a/build/variables.ts b/build/variables.ts
@@ -77,11 +77,3 @@ export const properties = {
   'pink-lighter': '#ffbbca',
   'pink-lightest': '#ffebef',
 };
-
-export const mediaQueries = {
-  smallOnly: 'screen and (max-width: 39.9375em)',
-  medium: 'screen and (min-width: 40em)',
-  mediumOnly: 'screen and (min-width: 40em) and (max-width: 63.9375em)',
-  large: 'screen and (min-width: 64em)',
-  largeOnly: 'screen and (min-width: 64em) and (max-width: 74.9375em)',
-};
diff --git a/build/webpack.conf.ts b/build/webpack.conf.ts
@@ -1,36 +1,19 @@
-import { resolve } from 'path';
-import * as webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { resolve } from 'path';
+import * as webpack from 'webpack';
 
 import postCssConfig from './postcss.config';
 
 const devMode = process.env.NODE_ENV !== 'production';
 const projectRoot = resolve(__dirname, '../');
 
-const postCssLoader = {
-  loader: 'postcss-loader',
-  options: {
-    plugins: postCssConfig
-  }
-};
-
-const plugins: webpack.Plugin[] = [
-  new HtmlWebpackPlugin({
-    template: projectRoot + '/src/index.html'
-  }),
-  new MiniCssExtractPlugin({
-    filename: '[name].[hash].css',
-    chunkFilename: '[id].[hash].css',
-  }),
-];
-
 const config: webpack.Configuration = {
   mode: devMode ? 'development' : 'production',
   devtool: devMode ? 'cheap-module-eval-source-map' : false,
   context: projectRoot,
   entry: {
-    'main': './src/main.ts',
+    main: './src/main.tsx',
   },
   output: {
     path: projectRoot + '/dist',
@@ -44,19 +27,43 @@ const config: webpack.Configuration = {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: ['ts-loader']
+        use: ['ts-loader'],
       },
       {
         test: /\.p?css$/,
         use: [
           devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
-          postCssLoader,
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: postCssConfig,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+            },
+          },
         ],
-      }
-    ]
+      },
+    ],
   },
-  plugins
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: projectRoot + '/src/index.html',
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css',
+    }),
+  ],
 };
 
 export default config;