Create a folder named guten-awesome in /wp-content/plugins/. Inside guten-awesome folder creates a starting file for our plugin. It can be any name. Which file has plugin header, this would be the main file. For simplicity, let it plugin.php

In plugin.php file, define required header comments. For quick, let it

/**
 * Plugin Name: Awesome Block
 */

Assume you will not forget about starting PHP tag.

Let’s do some BIG funny work. We will do it only one time per project.

Open command tools at guten-awesome folder. Because we need to use some React tech, so we need some packages.

Let’s initialize npm at root (/wp-content/plugins/guten-awesome/) via terminal command

npm init -f

Then, install packages.

We need only a package (npx) globally installed on our machine. Run this command to install npx. For my Ubuntu, I need to add sudo

npm i npx -g

Then, we need 12 packages as local dependency. 

1. webpack
2. webpack-cli
3. node-sass
4. sass-loader
5. css-loader
6. mini-css-extract-plugin
7. @babel/core
8. @babel/cli
9. babel-plugin-add-module-exports
10. @babel/plugin-transform-react-jsx
11. babel-loader
12. @babel/preset-env

Run this command to install these packages as devDependencies

npm i webpack webpack-cli node-sass sass-loader css-loader mini-css-extract-plugin @babel/core @babel/cli babel-plugin-add-module-exports babel-plugin-transform-react-jsx @babel/plugin-transform-react-jsx babel-loader @babel/preset-env --save-dev

After installing these packages, create webpack.config.js at the root. This is the configuration of webpack. For further, please read create webpack configuration file for custom need. Let’s open this file and define our logic.
We need mainly two kinds of tasks.

1. Compile SCSS files that will render browser-friendly CSS files.
2. Compile JS files that will render ES6 code to browser-friendly ES5 code.

Let’s bake the tasks.

First, define debug variable, write

var debug = process.env.NODE_ENV !== 'production';

Here, the debug variable is default set as development in stage mode. When we go to production, it will be produced.

Then, define ExtractText class. It uses mini-css-extract-plugin.

var ExtractText = require('mini-css-extract-plugin');

Then, define two new variables,

var extractEditorSCSS = new ExtractText({
 filename: './blocks.editor.build.css'
});
var extractBlockSCSS = new ExtractText({
  filename: './blocks.style.build.css'
});

extractEditorSCSS and extractBlockSCSS  are objects of ExtractText ( which define extract-text-webpack-plugin package ) class. ExtractText class receive an object of filename, which will be extracted.

Then, define the plugins array. It contains two objects, which were previously defined.

var plugins = [ extractEditorSCSS, extractBlockSCSS ];

Finally, define main functionality which is, module.exports.

module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    mode: debug ? 'development' : 'production',
    entry: './blocks/src/blocks.js',
    output: {
        path: __dirname + '/blocks/dist/',
        filename: 'blocks.build.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader'
            }
          ]
        },
        {
          test: /editor\.scss$/,
          exclude: /node_modules/,
          use: {
          	      loader: ExtractText.loader
           }
        },
        {
            test: /style\.scss$/,
            exclude: /node_modules/,
            use: {
          	      loader: ExtractText.loader
            }
        }
      ]
    },
    plugins: plugins
  };

Here, we will ask webpack some instructions.

context: Root of our project. __dirname does this.

devtool: If debug is true, print inline-source map, otherwise do not print anything.

mode: If debug is true, then enable development mode, otherwise enable the production mode.

entry: Starting a file of our project.

output: This parameter takes an object. Its path, define the files and filename define the name of output JS file. These files will be compiled by module rules, which will be defined next.

module: This parameter takes the rules of an array. 

Rule 1. Compile .js files in the project, exclude files in node_modules folder. It will use babel-loader package which was installed.

Rule 2: Compile all .scss files of editor folder in the dist folder. Exclude node_module’s .scss files. And use the loader method of mini-css-extract-plugin.

Rule 3 is the same as Rule 2, this time it compiles style folder’s files.

Finally, define the plugins parameter of module.exports. It takes previously declared plugins array.

Really lots of code. Let’s create some files and tests.

Create a babel configuration file .babelrc and paste following code

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "wp.element.createElement"
        }]
    ]
}

Create some folders and files.

• blocks
• blocks/dist
• blocks/src
• blocks/src/blocks.js
• blocks/src/common.scss
• blocks/src/block
• blocks/src/block/block.js
• blocks/src/block/editor.scss
• blocks/src/block/style.scss

Finally, Run the following command at the plugin root

npx webpack

It will create blocks.build.js. So the code we wrote is working.

Enough for today.