vedees

Webpack 4 template. Vue, Babel 7v, Sass / css / postcss (autoprefixer & css-nano & css-mqpacker)

249 Stars 148 Forks Last release: 3 months ago (2.0) MIT License 55 Commits 9 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:

Readme

Webpack Template

Name: webpack-template
Brand: webpack-template
SKU: //vedees/webpack-template
Rating: 2.3725 (249 reviews)

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

Settings:

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:

Install libs

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:

Install libs
Go to
```
/assets/scss/utils/libs.scss
```

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:

Create another js module in
```
./js/
```
folder

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

: 1. Create folder for all html files in

./src

. Be like:

./src/pages

2. Change

./build/webpack.base.conf.js

const PAGESDIR: ``` js // Old path // const PAGESDIR = PATHS.src

// Your new path const PAGES_DIR =

${PATHS.src}/pages

``` 3. Rerun webpack dev server

Usage: All files must be created in the

./src/pages

folder. Example:

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

(main folder) 2. Open new page

http://localhost:8081/about.html

(Don't forget to RERUN dev server) See more - commit

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

(main folder) 2. Go to

./build/webpack.base.conf.js

3. Comment lines above (create automaticlly html pages) 4. Create new page in html:

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
    }),

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:

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

Install vue
```
bash
npm install vue --save
```

Init vue

index.js

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

Create div id app
```
html
```

Vuex install:

Install vuex
```
bash
npm install vuex --save
```
Import Vuex
```
js
import store from './store'
```
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)

2. Any html files:

html

VUE Usage: 1. import components in .vue:

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

2. Register component:

js
  components: {
    example
  }

3. Init in vue component:

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

. FOLLOW: Files Required: Example:

.woff, .woffs

formats; 2. Go to

fonts.scss

; 3. Use mixin Example:

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

, Example 2:

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

License

MIT