Webpack Template

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Base Template: webpack-template

Author: To code | Youtube guide in Russian

Build Setup:

# Download repository:
git clone https://github.com/vedees/webpack-template-pug webpack-template-pug

# Go to the app:
cd webpack-template-pug

# Install dependencies:
npm install

# Server with hot reload at http://localhost:8081/
npm run dev

# Output will be at dist/ folder
npm run build

Project Structure:

• src/pug/layout - put custom layout for pages
• src/pug/includes - all app includes
• src/pug/utils - pug mixins and other
• src/pug/pages - put custom app pages. Don't forget to import them in index.js
• src/assets/scss - put custom app SCSS styles here. Don't forget to import them in index.js
• src/assets/css - the same as above but CSS here. Don't forget to import them in index.js
• src/assets/img - put images here. Don't forget to use correct path: assets/img/some.jpg
• src/js - put custom app scripts here
• src/index.js - main app file where you include/import all required libs and init app
• src/components - folder with custom .vue components
• static/ - folder with extra static assets that will be copied into output folder

Settings:

Main const:

Easy way to move all files. Default:

const PATHS = {
  // Path to main app dir
  src: path.join(__dirname, '../src'),
  // Path to Output dir
  dist: path.join(__dirname, '../dist'),
  // Path to Second Output dir (js/css/fonts etc folder)
  assets: 'assets/'
}

Customize:

Change any folders:

const PATHS = {
  // src must be src
  src: path.join(__dirname, '../src'),
  // dist to public
  dist: path.join(__dirname, '../public'),
  // assets to static
  assets: 'static/'
}

Import Another libs:

1. Install libs
2. Import libs in ./index.js

// React example
import React from 'react'
// Bootstrap example
import Bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
// or
import 'bootstrap/dist/js/bootstrap.min.js'

Import only SASS or CSS libs:

1. Install libs
2. Go to /assets/scss/utils/libs.scss
3. Import libs in node modules

// Sass librarys example:
@import '../../node_modules/spinners/stylesheets/spinners';
// CSS librarys example:
@import '../../node_modules/flickity/dist/flickity.css';

Import js files:

1. Create another js module in ./js/ folder
2. Import modules in ./js/index.js file

// another js file for example
import './common.js'

PUG Dir Folder:

Default:

• .pug dir: ./pug/pages
• Configurations: in ./build/webpack.base.conf.js Usage: All files must be created in the ./pug/pages folder. Example:

./pug/pages/index.pug
./pug/pages/about.pug

Change PUG Default Dir Folder:

Example for ./pug/mynewfolder/pages:

• Change ./build/webpack.base.conf.js const PAGES_DIR:

// Your new path
const PAGES_DIR = `${PATHS.src}/pug/mynewfolder/pages/`

3. Rerun webpack dev server

Create Another PUG Files:

Default:

Automatic creation any pug pages:

1. Create another pug file in ./pug/pages/
2. Open new page http://localhost:8081/about.html (Don't forget to RERUN dev server)

Second method:

Manual (not Automaticlly) creation any pug pages (Don't forget to RERUN dev server and COMMENT lines above)

1. Create another pug file in ./pug/pages/
2. Go to ./build/webpack.base.conf.js
3. Comment lines above (create automaticlly pug pages)
4. Create new page in pug:

    new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/about/index.pug`,
      filename: './about/index.html',
      inject: true
    }),
    new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/about/portfolio.pug`,
      filename: './about/portfolio.html',
      inject: true
    })

5. Open new page http://localhost:8081/about.html (Don't forget to RERUN dev server)

Third method: (BEST)

Сombine the first method and the second. Example:

    ...PAGES.map(page => new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/${page}`,
      filename: `./${page.replace(/\.pug/,'.html')}`
    }))
    new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/about/index.pug`,
      filename: './about/index.html',
      inject: true
    })

Vue install:

Default: already have

1. Install vue

npm install vue --save

2. Init vue index.js:

const app = new Vue({
  el: '#app'
})

3. Create div id app

#app
  //- Content

Vuex install:

1. Install vuex

npm install vuex --save

2. Import Vuex

import store from './store'

3. Create index.js in ./store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  // vuex content
})

Add Vue Components:

Create your component in /components/

PUG Usage:

1. Init component in index.js:

Vue.component('example-component', require('./components/Example.vue').default)

2. Any pug files:

example-component

VUE Usage:

1. import components in .vue:

import example from '~/components/Example.vue'

2. Register component:

  components: {
    example
  }

3. Init in vue component:

<example />

Add Fonts:

Add @font-face in /assets/scss/utils/fonts.scss:

// Example with Helvetica
@font-face {
  font-family: "Helvetica-Base";
  src: url('/assets/fonts/Helvetica/Base/Helvetica-Base.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/Helvetica/Base/Helvetica-Base.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/Helvetica/Base/Helvetica-Base.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/Helvetica/Base/Helvetica-Base.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/Helvetica/Base/Helvetica-Base.svg') format('svg'); /* Legacy iOS */
}

Add vars for font in /assets/scss/utils/vars.scss:

$mySecontFont : 'Helvetica-Base', Arial, sans-serif;

CSS overrides:

Add custom CSS to CSS overrides field in Aristotle theme settings.

If element has semitransparent background or color (e.g. checkbox and radio buttons) use this field and don't forget to use !important property.

Example:

js-form-type-checkbox label.option:before {
    border-color: #2f3758 !important;
}
.js-form-type-checkbox input:not(:checked)~label.option:hover:before {
    background: rgba(74, 211, 176, .8) !important;
    box-shadow: 0 0 0 2px rgba(74, 211, 176, .8) !important;
}

License

MIT

Copyright (c) 2018-present, Evgenii Vedegis