Saturday, September 28, 2019

React projects' initial size with 4K cluster size

npx create-razzle-app a1-create-razzle-app
npx create-react-app a2-create-react-app
npx create-next-app a3-create-next-app
npx create-react-app a4-create-react-app-pnp --use-pnp

Developers-iMac:_experiment_ dev$ du -sh a1-create-razzle-app/
1.3G a1-create-razzle-app/
Developers-iMac:_experiment_ dev$ du -sh a2-create-react-app/
2.2G a2-create-react-app/
Developers-iMac:_experiment_ dev$ du -sh a3-create-next-app/
707M a3-create-next-app/
Developers-iMac:_experiment_ dev$ du -sh a4-create-react-app-pnp/
231M a4-create-react-app-pnp/

Friday, September 27, 2019

Customize webpack from create-react-app

$ npx create-react-app experiment-react-customized-webpack --scripts-version react-scripts-rewired --use-pnp

Create a directory named shared under src directory

Create randomizer.js under shared directory
export function randomizer() {
    return 4;

Create directories components/deeply/nested under src directory

Create SampleComponent.js under src/components/deeply/nested directory
import React from "react";
import { randomizer } from "../../../shared/randomizer";

export function SampleComponent() {
    const a = randomizer();
    return (
            <strong>I am strong {a}</strong>


It should show on the page:

I am strong 4

Change SampleComponent.js import statement:
import { randomizer } from "../../../shared/randomizer";

import { randomizer } from "love/randomizer";


It will fail compiling

Change webpack.config.extend.js code to:

const path = require("path");
 * Project's customized Webpack Configuration Extension
 * ----------------------------------------------------
 * this file is heavily inspired by `react-app-rewired` mechanism.
 * it simply gives you the chance to hook into the default Webpack
 * configuration as it is provided by `create-react-app`, and to
 * change it so to match your project's needs.
 * If you want to check out the default values look into:
 * `./node_modules/marcopeg-react-scripts/config/webpack.config.${env}.js`
module.exports = (webpackConfig, env, { paths }) => {
    // here you can extend your webpackConfig at will
    webpackConfig.resolve.alias = {
        love: path.resolve(__dirname, "src", "shared")
    return webpackConfig;


It should show on the page:

I am strong 4