cl-npm v1.0.10

Step 0. Create Empty Folder

You can browse https://www.npmjs.com/ and check the component name which you create is exist yet.

Step 1. Initialize

Change your folder path in CMD or WebStorm Terminal

npm init

Step 2. Install dependencies

npm i --save react webpack

Step 3. install dev-Dependencies

npm i -D @babel/cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin webpack webpack-cli

Step 4. Modify package.json

Step 4-1. set up React as peer dependency

  "peerDependencies": {
    "react": "^16.4.0"
  },

Step 4-2 Provide build and start script

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack -p"
  },

Step 4-3. Set entry point to src/index.js

Step 5. webpack.config.js

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js'
    },
    mode: 'none',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
};

Step 6. .babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Step 7. Coding your jsx code ...

Step 8. Check

You can run npm start to check your program

Step 9.