@ereminnf/tools v0.1.5

Tools

js web application development tools like webpack, babel and etc.

Support for scss, typescript, react, webpack dev server, hot reload (hmr).

📦 Install

npm install @ereminnf/tools

📝 Usage

1. Add npm scripts to package.json:

{
    // ...
    "scripts": {
        // ...
        "build": "cross-env NODE_ENV=production webpack",
        "watch": "cross-env NODE_ENV=development webpack --watch",
        "start": "cross-env NODE_ENV=development webpack serve"
    }
    // ...
}

2. Install the minimum required dependencies:

The version of React is up to you, but the tools are stable (have been tested) on react@17.0.2

{
    // ...
    "devDependencies": {
        // ...
        "@types/react": "17.0.40",
        "@types/react-dom": "17.0.13",
        "cross-env": "7.0.3",
        "dotenv": "16.0.0"
    },
    "dependencies": {
        // ...
        "react": "17.0.2",
        "react-dom": "17.0.2"
    }
    // ...
}

3. Create webpack.config.js file in root directory:

The resolvePath function concatenates the path from the project root.

The override property is shown as an example.

By default, one alias is set:

alias: {
    // ...
    '@': resolvePath('src')
}

const { getWebpackConfig, resolvePath } = require('@ereminnf/tools')

const dotenv = require('dotenv').config({ path: resolvePath(`.env`) })

const envs = {
    PROJECT_NAME: process.env.PROJECT_NAME || dotenv.parsed.PROJECT_NAME,
}

module.exports = (env, arg) =>
    getWebpackConfig(
        { env, arg },
        {
            name: 'Ereminnf',
            mcss: 'enf',
            env: envs,
            data: envs,
            override: {
                resolve: {
                    alias: {
                        '@ui': resolvePath('src/ui'),
                    },
                },
            },
        }
    )

getWebpackConfig props:

interface GetWebpackConfigProps {
    webpackProps: {
        env: object
        arg: object
    }
    params?: {
        /** output.library value of wepback config property */
        name?: string
        /** prefix for css modules classes */
        mcss?: string
        /** env that will be available in the app, ex: console.log(process.env.PROJECT_NAME) */
        env?: object
        /** variables available in html, ex: <title>%PROJECT_NAME%</title> */
        data?: object
        /** overriding webpack config */
        override?: object
    }
}