alexnoz / Webpack Pug Scss Boilerplate
📂 Webpack 4 based boilerplate for building apps
Stars: ✭ 135
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Webpack Pug Scss Boilerplate
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+652.59%)
Mutual labels: webpack4, boilerplate, scss
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-74.07%)
Mutual labels: webpack4, boilerplate, scss
Pug Sass Boilerplate Starter Kit
A Front-end template for building web apps or sites using Pug(Jade) and Sass
Stars: ✭ 92 (-31.85%)
Mutual labels: boilerplate, pug
Vue Mpc
multiple pages (multiple entries) based on vue-cli3.x(基于vue-cli3.x创建的多页面应用,每个页面入口又可以创建自己的vue-router)
Stars: ✭ 97 (-28.15%)
Mutual labels: webpack4, scss
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-0.74%)
Mutual labels: scss, pug
React Boilerplate
Boilerplate for React Apps
Stars: ✭ 87 (-35.56%)
Mutual labels: webpack4, boilerplate
Cra Boilerplate
Up to date: This project is an Create React App - v2.1.1 boilerplate with integration of Redux, React Router, Redux thunk & Reactstrap(Bootstrap v4)
Stars: ✭ 87 (-35.56%)
Mutual labels: boilerplate, scss
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-24.44%)
Mutual labels: webpack4, boilerplate
Sing App
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
Stars: ✭ 1,187 (+779.26%)
Mutual labels: boilerplate, scss
Nextjs Ts
Opinionated Next JS project boilerplate with TypeScript and Redux
Stars: ✭ 134 (-0.74%)
Mutual labels: boilerplate, scss
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (-18.52%)
Mutual labels: boilerplate, scss
Rails React Boilerplate
Ruby on Rails, React, Webpack 4 boilerplate app.
Stars: ✭ 86 (-36.3%)
Mutual labels: webpack4, boilerplate
React Express Webpack
React boilerplate with ES2015, Express.js, and Webpack 4
Stars: ✭ 84 (-37.78%)
Mutual labels: webpack4, boilerplate
Css Flags
A collection of pure CSS flags, all single divs.
Stars: ✭ 90 (-33.33%)
Mutual labels: scss, pug
Pwa Boilerplate
✨ PWA Boilerplate is highly scalable and is designed to help you kick-start your next project 🔭.
Stars: ✭ 82 (-39.26%)
Mutual labels: boilerplate, scss
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+917.78%)
Mutual labels: scss, pug
Jade Html5 Boilerplate
HTML5 Boilerplate ported to Jade. Great as a drop and go markup skeleton for Express apps.
Stars: ✭ 111 (-17.78%)
Mutual labels: boilerplate, pug
Generator Dhboilerplate
Boilerplate made by David Hellmann
Stars: ✭ 54 (-60%)
Mutual labels: boilerplate, scss
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 = 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.js
file (for each page):
if (process.env.NODE_ENV !== 'production') {
require('./path/to/page.pug');
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].