npm link development working & improved webpack

package.json

@@ -9,10 +9,10 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --mode development",
+    "start": "cross-env NODE_ENV=development webpack-dev-server",
+    "build": "cross-env NODE_ENV=production webpack",
     "format": "prettier --write \"app/**/*.js\"",
-    "eslint-fix": "eslint --fix \"app/**/*.js\"",
+    "eslint-fix": "eslint --fix \"app/**/*.js\""
-    "build": "webpack --mode production"
   },
   "license": "MIT",
   "dependencies": {
@@ -23,11 +23,15 @@
     "clean-webpack-plugin": "^3.0.0",
     "cu-ui": "git+https://sean_macfarlane@bitbucket.org/connectustechnologies/connectus-wlan-ui-workspace.git",
     "graphql": "^14.6.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-helmet": "^5.2.1",
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "terser-webpack-plugin": "^2.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",
@@ -39,6 +43,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-root-import": "^6.4.1",
     "babel-polyfill": "^6.26.0",
+    "cross-env": "^7.0.2",
     "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -51,7 +56,6 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
     "file-loader": "^5.1.0",
-    "html-webpack-plugin": "^3.2.0",
     "husky": "^4.2.3",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
@@ -61,10 +65,10 @@
     "pretty-quick": "^2.0.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
   },
   "precommit": "NODE_ENV=production lint-staged",
   "browserslist": [

webpack.config.js

@@ -1,97 +1,11 @@
-const path = require('path');
+const webpackMerge = require('webpack-merge');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const common = require('./webpack/webpack.common');
-const HtmlWebPackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-module.exports = {
+const envs = {
-  mode: process.env.NODE_ENV,
+  development: 'dev',
-  entry: ['babel-polyfill', './app/index.js'],
+  production: 'prod',
-  output: {
-    path: path.join(__dirname, 'dist'),
-    publicPath: '/',
-    filename: 'bundle.js',
-  },
-  devtool: 'inline-source-map',
-  devServer: {
-    port: 3000,
-    historyApiFallback: true,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
-      },
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader', 'eslint-loader'],
-      },
-      {
-        // Preprocess 3rd party .css files located in node_modules
-        test: /\.css$/,
-        include: /node_modules/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(css|scss)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-              },
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-          },
-        ],
-      },
-    ],
-  },
-  optimization: {
-    minimizer: [new UglifyJsPlugin()],
-  },
-  resolve: {
-    modules: ['node_modules', path.resolve(`${__dirname}/app`)],
-    alias: {
-      app: path.resolve(`${__dirname}/app`),
-    },
-  },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new HtmlWebPackPlugin({
-      inject: true,
-      template: './app/index.html',
-      filename: './index.html',
-    }),
-  ],
 };
+/* eslint-disable global-require,import/no-dynamic-require */
+const env = envs[process.env.NODE_ENV || 'development'];
+const envConfig = require(`./webpack/webpack.${env}.js`);
+module.exports = webpackMerge(common, envConfig);

webpack/paths.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  root: path.resolve(__dirname, '../'),
+  outputPath: path.resolve(__dirname, '../', 'dist'),
+  entryPath: path.resolve(__dirname, '../', 'app/index.js'),
+  templatePath: path.resolve(__dirname, '../', 'app/index.html'),
+  imagesFolder: 'images',
+  fontsFolder: 'fonts',
+  cssFolder: 'css',
+  jsFolder: 'js',
+};

webpack/webpack.common.js

@@ -0,0 +1,46 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const commonPaths = require('./paths');
+
+module.exports = {
+  mode: process.env.NODE_ENV,
+  entry: ['babel-polyfill', commonPaths.entryPath],
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+          },
+        ],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', 'eslint-loader'],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: commonPaths.templatePath,
+    }),
+  ],
+};

webpack/webpack.dev.js

@@ -0,0 +1,54 @@
+const path = require('path');
+
+const commonPaths = require('./paths');
+
+module.exports = {
+  output: {
+    path: commonPaths.outputPath,
+    publicPath: '/',
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 3000,
+    historyApiFallback: true,
+    contentBase: commonPaths.outputPath,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      'node_modules',
+      'app',
+      path.resolve(__dirname, '../', 'node_modules', 'cu-ui', 'src'),
+    ],
+    alias: {
+      app: path.resolve(__dirname, '../', 'app'),
+      react: path.resolve(__dirname, '../', 'node_modules', 'react'),
+      'cu-ui': path.resolve(__dirname, '../', 'node_modules', 'cu-ui', 'src'),
+    },
+  },
+};

webpack/webpack.prod.js

@@ -0,0 +1,86 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const path = require('path');
+
+const commonPaths = require('./paths');
+
+module.exports = {
+  output: {
+    filename: `${commonPaths.jsFolder}/[name].[hash].js`,
+    path: commonPaths.outputPath,
+    publicPath: '/',
+    chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
+        parallel: true,
+        // Enable file caching
+        cache: true,
+        sourceMap: true,
+      }),
+      new OptimizeCSSAssetsPlugin(),
+    ],
+    // Automatically split vendor and commons
+    // https://twitter.com/wSokra/status/969633336732905474
+    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'initial',
+        },
+        async: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'async',
+          chunks: 'async',
+          minChunks: 4,
+        },
+      },
+    },
+    // Keep the runtime chunk seperated to enable long term caching
+    // https://twitter.com/wSokra/status/969679223278505985
+    runtimeChunk: true,
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: false,
+              localsConvention: 'camelCase',
+              modules: {
+                localIdentName: '[local]___[hash:base64:5]',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  resolve: {
+    modules: ['node_modules', 'app'],
+    alias: {
+      app: path.resolve(__dirname, '../', 'app'),
+    },
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: `${commonPaths.cssFolder}/[name].css`,
+      chunkFilename: `${commonPaths.cssFolder}/[name].css`,
+    }),
+  ],
+  devtool: 'source-map',
+};