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.

Build Setup:

# Download repository:
git clone https://github.com/nickerm3n/webpack-boilerplate.git

# 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:

Install libs
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:

Install libs
Go to /assets/scss/utils/libs.scss
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:

Create another js module in ./js/ folder
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/`;

Rerun webpack dev server

Create Another PUG Files:

Default:

Automatic creation any pug pages:

Create another pug file in ./pug/pages/
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)

Create another pug file in ./pug/pages/
Go to ./build/webpack.base.conf.js
Comment lines above (create automaticlly pug pages)
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,
  });

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

Install vue

npm install vue --save

Init vue index.js:

const app = new Vue({
  el: "#app",
});

Create div id app

#app
  //- Content

Vuex install:

Install vuex

npm install vuex --save

Import Vuex

import store from "./store";

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:

Init component in index.js:

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

Any pug files:

example-component

VUE Usage:

import components in .vue:

import example from "~/components/Example.vue";

components: {
  example;
}

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;

License

MIT