Webpack 4 template. Vue, Babel 7v, Sass / css / postcss (autoprefixer & css-nano & css-mqpacker)
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
# Download repository: git clone https://github.com/vedees/webpack-template webpack-templateGo 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
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
.vuecomponents
src/store- app store for vue
static/- folder with extra static assets that will be copied into output folder
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/' }
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/' }
./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'
/assets/scss/utils/libs.scss
scss // Sass librarys example: @import '../../node_modules/spinners/stylesheets/spinners'; // CSS librarys example: @import '../../node_modules/flickity/dist/flickity.css';
./js/folder
./js/index.jsfile
js // another js file for example import './common.js'
./src
./build/webpack.base.conf.js
js const PAGES_DIR = PATHS.srcUsage: All files must be created in the
./srcfolder. Example:
bash ./src/index.html ./src/about.html
Example for
./src/pages: 1. Create folder for all html files in
./src. Be like:
./src/pages2. Change
./build/webpack.base.conf.jsconst 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/pagesfolder. Example:
bash ./src/pages/index.html ./src/pages/about.html
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
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.js3. 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)
С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 }),
Default: already have
bash npm install vue --save
index.js:
js const app = new Vue({ el: '#app' })
html
bash npm install vuex --save
js import store from './store'
./store``` js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
export default new Vuex.Store({ // vuex content }) ```
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
Сhoose one of the ways: 1. Handle menthod, 2. Use mixin;
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;
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, .woffsformats; 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);.
Copyright (c) 2018-present, Evgenii Vedegis