Skip to content

Instantly share code, notes, and snippets.

@efuller
Last active January 19, 2020 01:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save efuller/062200f7c1718ceab4bd055e7c426673 to your computer and use it in GitHub Desktop.
Save efuller/062200f7c1718ceab4bd055e7c426673 to your computer and use it in GitHub Desktop.
A simple WordPress plugin that is setup to use webpack.
/**
* Admin entry point.
*
* src/admin/admin-index.js
*/
const admin = require( './components/admin-test' );
// Lets test!
admin.log( 'This is a message to the admin!!!!' );
/**
* Test admin component.
*
* src/admin/components/admin-test.js
*/
// Required in our shared function.
const { upper } = require( '../../utils/utils-index' );
const admin = {
log( message ) {
console.log( upper( message ) );
}
};
module.exports = admin;
/**
* Frontend entry point.
*
* src/front/front-index.js
*/
const front = require( './components/front-test' );
front.log( 'Here is a message for the frontend!' );
// Let's test a function using Lodash.
front.log( front.getLastArrayElement( [ 1, 2, 3 ] ) ); // Should log out 3.
/**
* Test frontend component.
*
* src/front/components/front-test.js
*/
// Required in our shared function.
const { upper, isString } = require( '../../utils/utils-index' );
// Require in the last function from Lodash.
const { last } = require('lodash');
const front = {
log( message ) {
if ( isString( message ) ) {
console.log( upper( message ) );
} else {
console.log( message );
}
},
getLastArrayElement( arr ) {
return last(arr);
}
};
module.exports = front;
{
"name": "wp-webpack-example",
"version": "1.0.0",
"description": "Simple WordPress plugin that uses webpack.",
"main": "index.js",
"babel": {
"presets": [
"@babel/preset-env"
]
},
"scripts": {
"watch": "webpack --mode=development --watch --config webpack-config.js",
"build": "webpack --mode=production --config webpack-config.js"
},
"keywords": [
"wordpress",
"webpack",
"javascript"
],
"author": "WebDevStudios",
"license": "GPL-2.0+",
"devDependencies": {
"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"lodash": "^4.17.11",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
}
}
/**
* Shared utilities.
*/
/**
* Uppercase a string.
*/
exports.upper = (message) => message.toUpperCase();
/**
* Test if is type string.
*/
exports.isString = (message) => 'string' === typeof message;
// Require path.
const path = require( 'path' );
// Configuration object.
const config = {
// Create the entry points.
// One for frontend and one for the admin area.
entry: {
// frontend and admin will replace the [name] portion of the output config below.
frontend: './src/front/front-index.js',
admin: './src/admin/admin-index.js'
},
// Create the output files.
// One for each of our entry points.
output: {
// [name] allows for the entry object keys to be used as file names.
filename: 'js/[name].js',
// Specify the path to the JS files.
path: path.resolve( __dirname, 'assets' )
},
// Setup a loader to transpile down the latest and great JavaScript so older browsers
// can understand it.
module: {
rules: [
{
// Look for any .js files.
test: /\.js$/,
// Exclude the node_modules folder.
exclude: /node_modules/,
// Use babel loader to transpile the JS files.
loader: 'babel-loader'
}
]
}
}
// Export the config object.
module.exports = config;
<?php
/**
* Plugin Name: WordPress Webpack Example
* Plugin URI: https://developer.wordpress.org/plugins/the-basics/
* Description: Simple WordPress plugin that uses webpack.
* Version: 1.0.0
* Author: WebDevStudios
* Author URI: https://www.webdevstudios.com
* Text Domain: wds-wwe
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
/**
* Enqueue frontend scripts.
*/
function frontend_scripts() {
wp_enqueue_script(
'wds-wwe-frontend-js',
plugins_url( 'assets/js/frontend.js', __FILE__ ),
[ 'jquery' ],
'11272018'
);
}
add_action( 'wp_enqueue_scripts', 'frontend_scripts' );
/**
* Enqueue admin scripts.
*/
function admin_scripts() {
wp_enqueue_script(
'wds-wwe-admin-js',
plugins_url( 'assets/js/admin.js', __FILE__ ),
[ 'jquery' ],
'11272018'
);
}
add_action( 'admin_enqueue_scripts', 'admin_scripts' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment