Webpack Pug SCSS Boilerplate
A webpack 4 based boilerplate for building web apps.
Features:
- Pug as a template engine
- SCSS preprocessor for CSS (autoprefixer included)
- JS linting with Eslint, extends eslint-config-standard, includes the following plugins:
- CSS linting with Stylelint
Note: There is also the feature/modern-bundle branch where
webpack
produces two production bundles (legacy & modern). It is experimental so use it with caution.
Usage:
- Clone the repo via
git clone https://github.com/alexnoz/webpack-pug-scss-boilerplate.git
cd webpack-pug-scss-boilerplate
- Run
yarn install
to fetch all the dependencies - Run
yarn start
to start the webpack-dev-server (localhost:8080
will be opened automatically) - Start developing
- When you are done, run
yarn build
to get the prod version of your app - If you want to analyze your production bundle, run
yarn run analyze
to kick off webpack-bundle-analyzer
Multiple pages:
With a few tweaks, you can use this boilerplate for multi-page apps. Suppose you have the following project structure:
app/
|-index.pug
|-index.js
|
|-about/
| |-about.pug
| |-index.js
|
...
- Make the following tweaks to the
webpack.config.js
:
// webpack.config.js // ... const commonConfig = // ... // 2. Call `parts.page` for each page with necessary optionsconst pages = parts parts // ... module { processenvNODE_ENV = env const config = env === 'production' ? productionConfig : developmentConfig // 3. Merge these pages into the final config return }
For details, please see parts.page()
source and html-webpack-plugin docs.
- For the live reload to work, you need to include the following snippet into every
index.js
file (for each page):
if processenvNODE_ENV !== 'production' ;