Creating build app

Author: andrelmlins

packages/react-dependency-scripts/configs/webpack.config.js

@@ -1,55 +1,98 @@
-"use strict";
+'use strict';
 
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const resolverPath = require("../utils/resolverPath");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const resolverPath = require('../utils/resolverPath');
 
-const APP_PATH = resolverPath("src/dev");
+const APP_PATH = resolverPath('src/dev');
+const BUILD_PATH = resolverPath('build');
 
-const config = {
-  entry: APP_PATH,
-  mode: "development",
-  resolve: {
-    modules: ["node_modules", "src/lib"],
-    extensions: [".ts", ".tsx", ".js", ".json"]
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(ts|js)x?$/,
-        loader: "babel-loader",
-        exclude: /node_modules/,
-        options: {
-          presets: [require.resolve("babel-preset-react-app")]
-        }
-      },
-      {
-        test: /\.(gif|png|jpe?g|svg)$/i,
-        use: [
-          "file-loader",
-          {
-            loader: "image-webpack-loader"
+const configWebpack = ({ mode }) => {
+  const isEnvProduction = mode === 'production';
+
+  return {
+    entry: APP_PATH,
+    output: {
+      path: BUILD_PATH,
+      pathinfo: !isEnvProduction,
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : 'bundle.js',
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : 'static/js/[name].chunk.js',
+      globalObject: 'this'
+    },
+    mode,
+    bail: isEnvProduction,
+    resolve: {
+      modules: ['node_modules', 'src'],
+      extensions: ['.ts', '.tsx', '.js', '.json']
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(ts|js)x?$/,
+          loader: require.resolve('babel-loader'),
+          exclude: /node_modules/,
+          options: {
+            babelrc: false,
+            configFile: false,
+            compact: isEnvProduction,
+            sourceMaps: false,
+            inputSourceMap: false,
+            presets: [require.resolve('babel-preset-react-app')]
           }
-        ]
-      },
-      {
-        test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader"]
-      },
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"]
-      }
+        },
+        {
+          test: /\.(gif|png|jpe?g|svg)$/i,
+          use: ['file-loader', { loader: 'image-webpack-loader' }]
+        },
+        {
+          test: /\.scss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader']
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader']
+        }
+      ]
+    },
+    optimization: { minimize: isEnvProduction },
+    node: {
+      module: 'empty',
+      dgram: 'empty',
+      dns: 'mock',
+      fs: 'empty',
+      http2: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty'
+    },
+    plugins: [
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          { inject: true, template: `${APP_PATH}/index.html` },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true
+                }
+              }
+            : undefined
+        )
+      )
     ]
-  },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: `${APP_PATH}/index.html`
-    })
-  ],
-
-  optimization: { minimize: false }
+  };
 };
 
-module.exports = config;
+module.exports = configWebpack;

packages/react-dependency-scripts/index.js

@@ -9,7 +9,7 @@ process.on('unhandledRejection', err => {
 const { spawnSync } = require('child_process');
 
 const args = process.argv.slice(2);
-const scripts = ['start', 'build', 'test'];
+const scripts = ['start', 'build', 'test', 'build-app'];
 
 if (args.length === 0) {
   console.log('\x1b[31mEmpty script.');

packages/react-dependency-scripts/package.json

@@ -36,6 +36,7 @@
     "choose-port": "^0.1.0",
     "css-loader": "^3.4.2",
     "file-loader": "^5.0.2",
+    "fs-extra": "^8.1.0",
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^6.0.0",
     "jest": "^25.1.0",

packages/react-dependency-scripts/scripts/build-app.js

@@ -0,0 +1,27 @@
+'use strict';
+
+process.env.NODE_ENV = 'production';
+process.env.BABEL_ENV = 'production';
+
+const Webpack = require('webpack');
+const fs = require('fs-extra');
+const resolverPath = require('../utils/resolverPath');
+const configWebpack = require('../configs/webpack.config.js');
+
+const BUILD_PATH = resolverPath('build');
+
+const config = configWebpack({
+  mode: 'production'
+});
+
+fs.emptyDirSync(BUILD_PATH);
+
+const compiler = Webpack(config);
+
+compiler.run((err, stats) => {
+  if (err) {
+    return console.log(err);
+  }
+
+  return console.log(stats);
+});