https://github.com/code-soup/webpack-php-boilerplate
Webpack5 config boilerplate for use with standalone PHP files
https://github.com/code-soup/webpack-php-boilerplate
Last synced: 3 months ago
JSON representation
Webpack5 config boilerplate for use with standalone PHP files
- Host: GitHub
- URL: https://github.com/code-soup/webpack-php-boilerplate
- Owner: code-soup
- License: gpl-3.0
- Created: 2021-04-25T07:48:24.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-29T08:48:51.000Z (almost 5 years ago)
- Last Synced: 2025-03-22T18:20:33.806Z (over 1 year ago)
- Language: JavaScript
- Size: 1.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 🚀 Webpack5 build script boilerplate for PHP
Webpack5 build script for creating static PHP and HTML pages.
## Requirements
- Local web server
- [PHP](https://secure.php.net/manual/en/install.php)
- [Node.js](http://nodejs.org/) >= 12.14.0
- [Yarn](https://yarnpkg.com/en/docs/install)
Included features
- SCSS
- Js
- Stylelint
- Automatically validate, fix and re-order your css properties
## Installation
Navigate to your web server root directory, and create a new folder for your project:
```
mkdir new-project && cd new-project
```
Clone repository
```
git clone git@github.com:code-soup/webpack-php-boilerplate.git .
```
Start fresh, remove .git folder and create new git repository.
This will ensure that your repository does not include history from original
```
rm -rf .git
git init
git add .
git commit -am 'Init setup'
```
Install dependencies
```
yarn
```
## Configurations
Update `publicPath` and `publicPathProd` in `/src/config.js`
For other options please read comments inside of a config.js file.
**Example 1**
```
http://localhost/my-small-project
https://www.mysmallproject.com
publicPath: '/my-small-project'
publicPathProd: '/'
```
**Example 2**
```
http://localhost/landing-pages/new-product-landing
https://www.projectwebsite.com/new-product-xyz
publicPath: '/landing-pages/new-product-landing'
publicPathProd: '/new-product-xyz'
```
**Example 3**
```
http://local.domain/html-templates/new-template
https://www.mytemplates.com/blue-template
devHost: 'http://local.domain',
publicPath: '/html-templates/new-template'
publicPathProd: '/blue-template'
```
## Commands
```
yarn start
```
Start development in the watch mode.
This will automatically compile css/js and refresh browser
```
yarn build
```
Build all css/js, same as `start` but this will not monitor file changes and autoupdate/regenerate build.
```
yarn build:prod
```
Create optimised build for production.
Do this before you move your files to production server
#### Other commands
```
yarn lint // Lint your source Js/SCSS files
yarn lint:styles // lint styles only
yarn lint:styles --fix // lint styles and attempt to fix errors
yarn lint:scripts // lint scripts only
yarn lint:scripts --fix // lint scripts and attempt to fix errors
yarn clean // delete /dist directory
yarn reinit // delete /dist and /node_modules directories and reinstall dependencies
```