All Projects → alexnoz → Webpack Pug Scss Boilerplate

alexnoz / Webpack Pug Scss Boilerplate

📂 Webpack 4 based boilerplate for building apps

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
Webpack4.x
webpack4.x详细配置步骤
Stars: ✭ 103 (-23.7%)
Mutual labels:  webpack4, 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 Baukasten
Awesome!
Stars: ✭ 50 (-62.96%)
Mutual labels:  boilerplate, scss
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:

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
|
...
  1. 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.

  1. 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].