WordPress Theme Development

docker-compose.yml

version: '3.3'

services:
  db:
    image: mysql:5.6
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  web:
    depends_on:
      - db
    image: wordpress:4.9.7-php7.1-apache
    volumes:
      - ./wp-content/:/var/www/html/wp-content
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_TABLE_PREFIX: wp_
      WORDPRESS_DEBUG: 1

volumes:
  db_data:

functions.php

<?php

$is_webpack_development =  defined( 'WP_DEBUG' ) && WP_DEBUG;
if ( $is_webpack_development ) {
	// TODO: Only during template dev
	define( 'WP_HOME', 'http://localhost:8080' );
	define( 'WP_SITEURL', 'http://localhost:8080' );
}

webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const webpack = require('webpack')

const DEV_MODE = process.env['NODE_ENV'] !== 'production'
const PROXY_URL = 'http://localhost:8080'

module.exports = {
  mode: DEV_MODE ? 'development' : 'production',
  entry: {
    customizer: './js/customizer.js',
    main: './js/main.js',
    navigation: './js/navigation.js',
    'skip-link-focus-fix': './js/skip-link-focus-fix.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: `${PROXY_URL}/wp-content/themes/four-dots/dist/`,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  externals: {
    jquery: 'jQuery',
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: './dist',
    publicPath: '/wp-content/themes/four-dots/dist/',
    hot: true,
    proxy: {
      '**': {
        bypass(req) {
          return (
            req.url.match('hot-update.json$') ||
            (req.url.match('^/wp-content/themes/four-dots/dist/') &&
              req.method !== 'GET')
          )
        },
        target: 'http://localhost:8000',
      },
    },
  },
}