Merge pull request #4 from andrelmlins/feature/build-app

Feature/build app

Author: andrelmlins

docs/docs/scripsts.md renamed to docs/docs/scripts.md

@@ -4,7 +4,7 @@ title: Scripts
 sidebar_label: Scripts
 ---
 
-## Start the project
+## Start the development application
 
 Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`.
 
@@ -14,7 +14,7 @@ npm start
 yarn start
 ```
 
-## Build the project
+## Build the library
 
 Using [babel](https://babeljs.io/) with reference to folder `src/lib`.
 
@@ -24,6 +24,16 @@ npm build
 yarn build
 ```
 
+## Build the developmento application
+
+Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`.
+
+```
+npm build:app
+// OR
+yarn build:app
+```
+
 ## Test the project
 
 Using [jest](https://jestjs.io/) with reference to folder `src/lib`. Is possible edit the test config in `package.json`.

lerna.json

@@ -2,5 +2,5 @@
   "packages": ["packages/*"],
   "useWorkspaces": true,
   "npmClient": "yarn",
-  "version": "0.5.1"
+  "version": "0.6.0"
 }

packages/create-react-dependency/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-dependency",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Creating react libraries",
   "main": "index.js",
   "author": "André Lins <[email protected]> (https://andrelmlins.github.io/)",

packages/create-react-dependency/stages/createPackageJson.js

@@ -14,12 +14,13 @@ const createPackageJson = (root, name) => {
     scripts: {
       start: 'react-dependency-scripts start',
       build: 'react-dependency-scripts build',
+      'build:app': 'react-dependency-scripts build-app',
       test: 'react-dependency-scripts test'
     },
     devDependencies: {
       react: '^16.12.0',
       'react-dom': '^16.12.0',
-      'react-dependency-scripts': '^0.5.1'
+      'react-dependency-scripts': '^0.6.0'
     },
     browserslist: {
       production: ['>0.2%', 'not dead', 'not op_mini all'],

packages/react-dependency-scripts/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://badge.fury.io/js/react-dependency-scripts.svg)](https://www.npmjs.com/package/react-dependency-scripts)
 
-## Start the project
+## Start the development application
 
 Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`.
 
@@ -12,7 +12,7 @@ npm start
 yarn start
 ```
 
-## Build the project
+## Build the library
 
 Using [babel](https://babeljs.io/) with reference to folder `src/lib`.
 
@@ -22,6 +22,16 @@ npm build
 yarn build
 ```
 
+## Build the developmento application
+
+Using [webpack](https://webpack.js.org/) with reference to folder `src/dev`.
+
+```
+npm build:app
+// OR
+yarn build:app
+```
+
 ## Test the project
 
 Using [jest](https://jestjs.io/) with reference to folder `src/lib`. Is possible edit the test config in `package.json`.

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

@@ -1,55 +1,102 @@
-"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',
+        resolverPath('node_modules'),
+        resolverPath('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

@@ -1,6 +1,6 @@
 {
   "name": "react-dependency-scripts",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Scripts of react libraries",
   "main": "index.js",
   "author": "André Lins <[email protected]> (https://andrelmlins.github.io/)",
@@ -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);
+});

packages/react-dependency-scripts/scripts/start.js

@@ -10,12 +10,16 @@ process.on('unhandledRejection', err => {
 const Webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const open = require('open');
-const config = require('../configs/webpack.config.js');
+const configWebpack = require('../configs/webpack.config.js');
 const resolverPath = require('../utils/resolverPath');
 const choosePort = require('choose-port');
 
 const APP_PATH = resolverPath('src/dev');
 
+const config = configWebpack({
+  mode: 'development'
+});
+
 const compiler = Webpack(config);
 const server = new WebpackDevServer(compiler, {
   contentBase: APP_PATH,