webpack-pug-scss-boilerplate

by alexnoz

:open_file_folder: Webpack 4 based boilerplate for building apps

134 Stars 49 Forks Last release: Not found 78 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
    : ```javascript // 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');
  }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.