Webpack Hashed Assets Theme for Wordpress (Just the require structure)

enqueue-assets-template.php

/* File location: /src/enqueue-assets-template.php */
<?php

/**
 * Template for the webpack config to be replace the appropiate assets. It uses the shortcode format [asset_name]
 * The asset name is the webpack [name] of the original asset minus the extension, e.g. [theme.styles] for theme.styles.css
 * Enqueue scripts and styles.
 */
function webpack_enqueue_assets() {

    wp_enqueue_style( 'framework', get_template_directory_uri().'/assets/webpack/[framework]', array(), null );
    wp_enqueue_script( 'main', get_template_directory_uri().'/assets/webpack/[main]', array(), null, true );

}
add_action( 'wp_enqueue_scripts', 'webpack_enqueue_assets' );

framework.scss

/* File location: /src/scss/framework.scss */

@import "../../node_modules/bulma/bulma";

main.js

/* File location: /src/js/main.js */
/* Project example of main.js */

import lazySizes from 'lazysizes';
import 'lazysizes/plugins/bgset/ls.bgset';
import 'lazysizes/plugins/unveilhooks/ls.unveilhooks';

package.json

{
  "name": "webpack-hashed-assets-theme",
  "title": "Webpack Hashed Assets Theme",
  "description": "Example of integration with Webpack Hashed Assets. Files are modified and copied to a single php for easy enqueueing.",
  "version": "0.1.0",
  "homepage": "http://www.ollieford.com",
  "author": {
    "name": "Ollie Ford & Co",
    "email": "[email protected]"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "keywords": [],
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/runtime-corejs2": "^7.0.0",
    "@wordpress/babel-preset-default": "^2.1.0",
    "autoprefixer": "^9.6.0",
    "babel-loader": "^8.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "contenthash-replace-webpack-plugin": "^0.0.5",
    "copy": "^0.3.2",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.10",
    "extract-loader": "^2.0.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "gulp": "^4.0.2",
    "gulp-minify": "^3.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "postcss-cli": "^6.0.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.4.1",
    "webpack-cli": "^3.3.4"
  },
  "dependencies": {
    "bulma": "^0.7.5",
    "lazysizes": "^5.1.0",
    "lodash": "^4.17.11",
    "throttle-debounce": "^1.0.1"
  },
  "scripts": {
    "webpack": "npx webpack"
  }
}

webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const fileSystem = require("fs");
const useVersioning = true;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

function changeHashedAsset(php, oldName, newName) {
    php = php.replace(oldName, newName);
    return php;
}

module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    entry: ['./src/js/main.js', './src/scss/framework.scss'],
    output: {
        path: path.resolve(__dirname, 'assets/webpack'),
        filename: useVersioning ? '[name].[hash:6].js' : '[name].js',
        publicPath: '/',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new ExtractTextPlugin(
            useVersioning ? '[name].[md5:contenthash:hex:6].css' : '[name].css'
        ),
        function() {
            this.plugin("done", function(statsData) {
                const stats = statsData.toJson();

                if (!stats.errors.length) {
                    if(stats.assets.length > 0) {
                        var php = fileSystem.readFileSync(path.join(__dirname, './src/enqueue-assets-template.php'), "utf8");

                        stats.assets.forEach(function(element, i) {
                            let assetShortcode = '['+element.name.split('.')[0]+']';
                            php = changeHashedAsset(php, assetShortcode, element.name);
                        });


                        fileSystem.writeFileSync(path.join(__dirname, "enqueue-assets.php"), php);
                    }
                }
            });
        }
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[contenthash].css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader?-url'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};