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
webpackproduces 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 installto fetch all the dependencies - Run
yarn startto start the webpack-dev-server (localhost:8080will be opened automatically) - Start developing
- When you are done, run
yarn buildto get the prod version of your app - If you want to analyze your production bundle, run
yarn run analyzeto 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 = merge([
// ...
plugins: [
// 1. Remove this plugin
new HtmlPlugin({
template: './index.pug'
}),
new FriendlyErrorsPlugin(),
new StylelintPlugin(lintStylesOptions)
],
// ...
])
// ...
// 2. Call `parts.page` for each page with necessary options
const pages = [
parts.page({
title: 'Home',
entry: {
home: paths.app
},
template: path.join(paths.app, 'index.pug'),
// An array of chunks to include in the page
chunks: ['home', 'runtime', 'vendors']
}),
parts.page({
title: 'About',
path: 'about',
entry: {
about: path.join(paths.app, 'about')
},
template: path.join(paths.app, 'about/about.pug'),
chunks: ['about', 'runtime', 'vendors']
})
]
// ...
module.exports = env => {
process.env.NODE_ENV = env
const config = env === 'production'
? productionConfig
: developmentConfig
// 3. Merge these pages into the final config
return merge(commonConfig, config, ...pages)
}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.jsfile (for each page):
if (process.env.NODE_ENV !== 'production') {
require('./path/to/page.pug');
}