Initialize package.json
npm init -y
Install wp-cli
npm install wp-cli --save-dev
Install WordPress Scripts for Webpack
npm install @wordpress/scripts --save-dev
Install Sass Loader
npm install sass-loader style-loader sass webpack --save-dev
webpack.config.js
const path = require('path'); module.exports = { entry: './assets/src/js/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'assets/dist'), }, module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', // injects CSS into the DOM 'css-loader', // translates CSS into CommonJS modules 'sass-loader' // compiles Sass to CSS ] } ] } };
package.json
"scripts": { "build": "wp-scripts build", "start": "wp-scripts start", "dev": "wp-scripts start", "devFast": "wp-scripts start", "test": "echo \"Error: no test specified\" && exit 1" },
Enqueue compiled JavaScript in WordPress
function enqueue_theme_scripts() { wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/dist/main.js', array(), '1.0.0', true); } add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');
Leave a Reply