-
-
Save efuller/062200f7c1718ceab4bd055e7c426673 to your computer and use it in GitHub Desktop.
A simple WordPress plugin that is setup to use webpack.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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!!!!' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Shared utilities. | |
*/ | |
/** | |
* Uppercase a string. | |
*/ | |
exports.upper = (message) => message.toUpperCase(); | |
/** | |
* Test if is type string. | |
*/ | |
exports.isString = (message) => 'string' === typeof message; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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