Block Editor Handbook やるときのwebpack設定など

.babelrc

{
    "presets": [
        "@babel/preset-env", 
        "@babel/preset-react"
    ]
}

package.json

{
  "name": "gutenberg_examples",
  "version": "1.0.0",
  "description": "",
  "main": "block.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  },
  "dependencies": {}
}

webpack.config.js

module.exports = {
  mode: "development",
  context: __dirname,
  entry: './block.esnext.js',
  output: {
      path: __dirname,
      filename: "block.js"
  },

  module: {
    rules: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
    }],
  },

}

こんな階層で作業する感じです。

• plugin.php #register_block_typeなど
• block.esnext.js #ハンドブックの「ES Next」のソースを持ってくる
• block.js #トランスパイル後のjsソース（編集しない）