Initial webpack prod setup

React-Proto · Jul 25, 2018 · 24a9fb3 · 24a9fb3
1 parent 0d4c30f
commit 24a9fb3
Show file tree

Hide file tree

Showing 11 changed files with 907 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,13 +5,17 @@
   "main": "src/main.js",
   "scripts": {
     "start": "webpack-dev-server --mode development --open --hot",
-    "build": "webpack --mode production",
+    "prebuild": "rimraf dist",
+    "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.production.js",
+    "dev": "webpack -d --config webpack.config.development.js --watch --hot",
     "electron": "electron .",
     "lint": "eslint ."
   },
   "author": "Blessing Ebowe, Brian Taylor, Erik Gunther",
   "license": "MIT",
   "dependencies": {
+    "@material-ui/core": "^1.4.1",
+    "autoprefixer": "^9.0.1",
     "electron": "^2.0.5",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -23,14 +27,20 @@
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.0",
     "eslint-config-airbnb-base": "^13.0.0",
     "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.1.0",
+    "postcss-loader": "^2.1.6",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^7.0.3",
     "style-loader": "^0.20.3",
     "webpack": "^4.4.0",
     "webpack-cli": "^2.0.13",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+const prefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [prefixer],
+};
diff --git a/src/config/index.js b/src/config/index.js
diff --git a/src/containers/.gitkeep b/src/containers/.gitkeep
diff --git a/src/public/images/.gitkeep b/src/public/images/.gitkeep
diff --git a/src/index.html → src/public/index.html b/src/index.html → src/public/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>My React App</title>
+  <title>React Proto</title>
 </head>
 
 <body>

diff --git a/src/style.css → src/public/styles/style.css b/src/style.css → src/public/styles/style.css
diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep
diff --git a/webpack.config.js → webpack.config.development.js b/webpack.config.js → webpack.config.development.js
@@ -1,8 +1,13 @@
 const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const DIST_DIR = path.join(__dirname, 'dist');
+const SRC_DIR = path.join(__dirname, 'src');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: './index.js',
   output: {
     path: path.join(__dirname, '/dist'),
     filename: 'index_bundle.js',

diff --git a/webpack.config.production.js b/webpack.config.production.js
@@ -0,0 +1,83 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const DIST_DIR = path.join(__dirname, 'dist');
+const SRC_DIR = path.join(__dirname, 'src');
+
+module.exports = {
+  mode: 'production',
+  context: SRC_DIR,
+  entry: {
+    app: './index.js',
+    vendor: [
+      '@material-ui/core',
+    ],
+  },
+  output: {
+    filename: 'js/bundle.[hash].js',
+    path: DIST_DIR,
+    publicPath: '/',
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(s?css)$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                camelCase: true,
+                sourceMap: true,
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                config: {
+                  ctx: {
+                    autoprefixer: {
+                      browsers: 'last 2 versions',
+                    },
+                  },
+                },
+              },
+            },
+            {
+              loader: 'sass-loader',
+            },
+          ],
+        }),
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          chunks: 'initial',
+          test: 'vendor',
+          name: 'vendor',
+          enforce: true,
+        },
+      },
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+    }),
+    new ExtractTextPlugin({
+      filename: 'styles/styles.[hash].css',
+      allChunks: true,
+    }),
+  ],
+};