Webpack Template Document

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.

Author: To code | Youtube guide in Russian

Build Setup:

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

Go to the app:
cd webpack-template
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/index.html

  - main app HTML

• 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

• src/store

  - app store for vue

• static/

  - folder with extra static assets that will be copied into output folder

Main const:

Easy way to move all files. Default:

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

js
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

   js
   // React example
   import React from 'react'
   // Bootstrap example
   import Bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
   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

   scss
   // 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

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

HTML Dir Folder:

Default:

• .html dir:

  ./src

• Configurations: in

  ./build/webpack.base.conf.js

  js
  const PAGES_DIR = PATHS.src
  

  Usage: All files must be created in the

  ./src

  folder. Example:

  bash
  ./src/index.html
  ./src/about.html
  

Change HTML Default Dir Folder:

Example for

./src/pages

./src

./src/pages

./build/webpack.base.conf.js

// Your new path const PAGES_DIR =

${PATHS.src}/pages

Usage: All files must be created in the

./src/pages

bash
./src/pages/index.html
./src/pages/about.html

Create Another HTML Files:

Default:

Automatic creation any html pages: 1. Create another html file in

./src

http://localhost:8081/about.html

Second method:

Manual (not Automaticlly) creation any html pages (Don't forget to RERUN dev server and COMMENT lines above) 1. Create another html file in

./src

./build/webpack.base.conf.js

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

http://localhost:8081/about.html

Third method: (BEST)

Сombine the first method and the second. Example:

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

Vue install:

Default: already have

1. Install vue

   bash
   npm install vue --save
   

2. Init vue

   index.js

   :

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

3. Create div id app

   html
   
   
   
   

Vuex install:

1. Install vuex

   bash
   npm install vuex --save
   

2. Import Vuex

   js
   import store from './store'
   

3. Create index.js in

   ./store

   ``` js 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/

HTML Usage: 1. Init component in

index.js

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

html
 

VUE Usage: 1. import components in .vue:

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

js
  components: {
    example
  }

html

Add Fonts:

Сhoose one of the ways: 1. Handle menthod, 2. Use mixin;

Handle:

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;

Or with mixin:

By default template support only modern format fonts: .woff, .woffs;

If ypu need svg or more formaths use another mixin in

src/assets/scss/utils/mixin.scss

Usage: 1. Put your font to

src/assets/fonts/FOLDERNAME/FONTNAME

.woff, .woffs

fonts.scss

@include font-face("OpenSans", "../fonts/OpenSans/opensans");

@include font-face("OpenSans", "../fonts/OpenSans/opensansItalic", 400, italic);

License

MIT

Copyright (c) 2018-present, Evgenii Vedegis