This is a sample project that provide a simple installation of Webpack in a Wordpress theme, adding also some useful tools like Babel, React, Modernizr, js-xss, normalize.css, Autoprefixer, Prettier and a Sass boilerplate.
This branch builds separately CSS and main.js, if you want to have two different and separate files just change the branch.
- install Node.js, if you are using cPanel, follow this guide in order to create a Node app
- copy the repository into a WordPress theme
- build a custom Modernizr file here and replace
/js/modernizr-custom.js - open SSH connection
cdin the theme folder, if you are using cPanel enter to the virtual environment (follow the previous guide)- open
functions.phpand add:
/* Enqueue script del bundle di webpack */
function webpack_enqueue_scripts() {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/dist/main.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'webpack_enqueue_scripts' );
- in the terminal (you can also use
npm run devornpm run watch:
npm install
npm run build
- don't forget to follow To do section
- remember to sanitize input client through js-xss (follow the example in
/js/index.js) - remember to add conditionals for Modernizr (follow the example in
/js/index.js) - remember to lint through Prettier after deploying:
npx prettier --write .