Snow Monkeyのテーマをmy-snow-monkeyでカスタマイズする、webpackを使って作る快適な開発環境のサンプル

<?php
/**
 * Plugin name: My Snow Monkey Sample
 * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
 * Version: 0.2.1
 *
 * @package my-snow-monkey-sample
 * @author webkei
 * @license GPL-2.0+
 */

// 〜 TODO さまざまなmy-snow-monkeyプラグインの設定（my-my-snow-monkeyからコピーすること） 〜


/**
 * My Snow Monkey の中でテンプレートを追加できるようにする
 */
add_filter(
    'snow_monkey_template_part_root_hierarchy',
    function ($hierarchy) {
        $hierarchy[] = untrailingslashit(__DIR__) . '/override';
        return $hierarchy;
    }
);
/**
 * フロントに関するものを記述する
 */
include_once( __DIR__ . '/front.php' );

/**
 *  管理画面に関するものを記述する
 */
include_once( __DIR__ . '/admin.php' );

$ cd wp-content/plugins/my-snow-monkey-sample/

$ yarn

$ yarn start

$ yarn build

{
  "name": "my-snow-monkey",
  "description": "my-snow-monkey project",
  "version": "1.0.0",
  "author": "cubdesign",
  "license": "GPL-3.0+",
  "private": true,
  "scripts": {
    "start": "webpack --watch",
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch"
  },
  "dependencies": {
    "jquery": "3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@webpack-cli/generators": "^2.1.0",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "dotenv": "^10.0.0",
    "dotenv-webpack": "^7.0.3",
    "eslint": "^7.29.0",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss": "^8.2.15",
    "postcss-loader": "^5.3.0",
    "prettier": "^2.3.0",
    "sass": "^1.32.13",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0",
    "webpack-livereload-plugin": "^3.0.1",
    "webpack-remove-empty-scripts": "^0.7.1"
  },
  "browserslist": [
    "defaults",
    "not dead",
    "not op_mini all",
    "ie 11"
  ]
}

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const fs = require("fs");
const webpack = require("webpack");
const Dotenv = require("dotenv-webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts");
const LiveReloadPlugin = require("webpack-livereload-plugin");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = MiniCssExtractPlugin.loader;

// .envを読み込む
require("dotenv").config();

const config = {
  entry: {
    app: "./src/js/app.js",
    style: "./src/css/style.scss",
    "editor-style": "./src/css/editor-style.scss",
  },
  output: {
    path: path.resolve(__dirname, "assets"),
  },
  plugins: [
    new Dotenv(),
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin({ filename: "[name].css" }),
    new CleanWebpackPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
    }),
  ],
  // externals: {
  //   jquery: "jQuery",
  // },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },
    ],
  },
};

/*
  LiveReload 設定 Start -------------------
*/

// KEYファイルへのwebpack.config.jsからの相対パス
const WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH =
  process.env.WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH;

// CERTファイルへのwebpack.config.jsからの相対パス
const WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH =
  process.env.WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH;

const liveReloadPluginOptions = {
  // 自動で、LiveReload用のScriptタグを埋め込む
  appendScriptTag: true,
};

if (
  WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH &&
  WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH
) {
  /*
      HTTPSでLiveReloadを使う設定
   */
  liveReloadPluginOptions.protocol = "https";

  liveReloadPluginOptions.key = fs.readFileSync(
    path.resolve(__dirname, WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH)
  );

  liveReloadPluginOptions.cert = fs.readFileSync(
    path.resolve(__dirname, WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH)
  );
}
/*
 LiveReload 設定 End -------------------
*/

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
    // source-mapを有効にする
    config.devtool = "inline-source-map";
    // LiveReloadを有効にする
    config.plugins.push(new LiveReloadPlugin(liveReloadPluginOptions));
  }
  return config;
};

$ brew install mkcert

$ mkcert -install

$ cd {保存する場所} 

$ mkcert webkei.local

WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH=../../../../../certs/webkei.local-key.pem
WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH=../../../../../certs/webkei.local.pem