wps
webpack-pug-scss-boiperplate
npm i webpack-pug-scss-boiperplate
wps

webpack-pug-scss-boiperplate

📂 Webpack 4 based boilerplate for building apps

by Alex Nozdriukhin

2.1.3 (see all)License:MITTypeScript:Not Found
npm i webpack-pug-scss-boiperplate
Readme

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.

  2. 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');
    }
    

Downloads/wk

6

GitHub Stars

135

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

5

OPEN PRs

2
VersionTagPublished
2.1.3
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial