https://github.com/tcb13/wpbento-bundler
A sane and simple Webpack setup for WordPress development.
https://github.com/tcb13/wpbento-bundler
scss typescript webpack wordpress-boilerplate wordpress-bundle wordpress-development wordpress-theme-development wordpress-webpack
Last synced: 6 months ago
JSON representation
A sane and simple Webpack setup for WordPress development.
- Host: GitHub
- URL: https://github.com/tcb13/wpbento-bundler
- Owner: TCB13
- License: mit
- Created: 2023-05-25T14:59:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-25T15:31:22.000Z (about 2 years ago)
- Last Synced: 2024-12-01T12:08:11.442Z (6 months ago)
- Topics: scss, typescript, webpack, wordpress-boilerplate, wordpress-bundle, wordpress-development, wordpress-theme-development, wordpress-webpack
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WPBento Bundler
A sane and simple Webpack setup for WordPress development.
**Main Features:**
- Runs alongside any webserver/PHP and does not interface nor interferes with it
- Bundles SCSS into a single `style.min.css` file
- Bundles JS modules (and optionally TypeScript) into `script.min.js`
- Browser live-reload
- ES Modules
## Quick Setup
1. Folder structure:
````
./ -> your WordPress theme folder
./src -> source folder for js, ts, scss files
./assets -> complied/bundled output files
````
2. Configuration for `package.json`:
````
"type": "module",
"scripts": {
"watch": "webpack --progress --watch --mode development",
"build-prod": "webpack --mode production",
"build-dev": "webpack --mode development"
},
````
3. Install dev dependencies:
````
$ npm i
# OR if you aren't cloning this repo:
$ npm install @babel/core @babel/preset-env babel-loader css-loader mini-css-extract-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli browser-sync-webpack-plugin --save-dev
````
4. Add the bundled files to your `header.php`:
````
````
## Usage
````
$ npm run watch # Development with live reload
$ npm run build-prod # Build for production
````
________
Brought to you by TCB13 (Tadeu Bento) 2023. Licensed under MIT.