cvgellhorn / webpack-boilerplate

A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board

Webpack 5 Boilerplate

A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board

Requirements

You only need node.js >=10.13.0 pre-installed and you’re good to go.

If you don’t want to work with lodash, just remove it from the node packages.

Usage

Download to target directory or use this repository as a template

$ curl -L -o master.zip https://github.com/cvgellhorn/webpack-boilerplate/archive/master.zip && unzip master.zip && rm master.zip && mv ./webpack-boilerplate-master/{.,}* ./ && rm -r ./webpack-boilerplate-master

Setup

Install dependencies

$ npm install

Development

Build the app in dev mode and run webpack serve with livereload and autocompile on http://0.0.0.0:8080/

$ npm run dev

Production

Build the app in production mode

$ npm run build

webpack

If you're not familiar with webpack, webpack serve will serve the static files in your build folder and watch your source files for changes. When changes are made the bundle will be recompiled. This modified bundle is served from memory at the relative path specified in publicPath.

webpack-boilerplate's Issues

curl script in readme and webpack-boilerplate-master

The script in the readme for installing the project results in the creation of a webpack-boilerplate-master directory. Inside the directory is .babelrc, .editorconfig and .gitignore. Whenever I use this boilerplate I find myself moving these files to the root and deleting the webpack-boilerplate-master directory.

Is there any reason for having this directory? The script in the readme is very useful but I'd much rather it started my project without that directory and the files in the correct place. :)

The script in question:

$ curl -L -o master.zip https://github.com/cvgellhorn/webpack-boilerplate/archive/master.zip && unzip master.zip && rm master.zip && mv ./webpack-boilerplate-master/* ./

npm run build fails with ES6 Array function

Everything compiles just fine in dev env but when I try to "npm run build" uglify crashes on ES6 Array function with the following output:

ERROR in bundle.e94e6d4571cc0c36aaf8.js from UglifyJs
Unexpected token: operator (>) [./app/index.js:11,38][bundle.e94e6d4571cc0c36aaf8.js:17,159]
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 14.2 kB {0} [built]

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.11.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack -p --progress --config webpack.config.build.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build script 'webpack -p --progress --config webpack.config.build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack -p --progress --config webpack.config.build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webpack-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/gomoon/Documents/workspace/Miysis/Mobitec 2017/VideoPage/App/npm-debug.log

Here's my npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/gomoon/Documents/workspace/Miysis/Mobitec 2017/VideoPage/App/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
10 verbose lifecycle [email protected]~build: CWD: /Users/gomoon/Documents/workspace/Miysis/Mobitec 2017/VideoPage/App
11 silly lifecycle [email protected]~build: Args: [ '-c',
11 silly lifecycle   'webpack -p --progress --config webpack.config.build.js' ]
12 silly lifecycle [email protected]~build: Returned: code: 2  signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `webpack -p --progress --config webpack.config.build.js`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:920:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/gomoon/Documents/workspace/Miysis/Mobitec 2017/VideoPage/App
17 error Darwin 16.7.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
19 error node v6.11.3
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] build: `webpack -p --progress --config webpack.config.build.js`
22 error Exit status 2
23 error Failed at the [email protected] build script 'webpack -p --progress --config webpack.config.build.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the webpack-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack -p --progress --config webpack.config.build.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs webpack-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls webpack-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

and here's my index.js

/**
 * Application entry point
 */

import 'styles/index.scss'
import Vidactic from './libs/vidactic'
import _ from 'lodash'
// import furniture from './config/furniture'
// The following are added by CDN in index.ejs
/* global Modernizr */

// Creating an animated timeline cursor
const timelineCursor = document.createElement('span')
timelineCursor.className = 'timeline-cursor'
_.assign(timelineCursor.style, {
  visibility: 'hidden'
})

const vidactic = new Vidactic('test')
document.getElementById('main').addEventListener('mousewheel', (event) => {
  if (
    vidactic.players.forward.paused() === true &&
    vidactic.players.backward.paused() === true
  ) {
    if (event.deltaY > 0) {
      vidactic.setCurrentPlayer(vidactic.players.forward).showCurrentPlayer()
    }
    if (event.deltaY < 0) {
      vidactic.setCurrentPlayer(vidactic.players.backward).showCurrentPlayer()
    }
    vidactic.play()
  }
});

// IE Fallback for object-fit
// https://codepen.io/arniebradfo/pen/eFtdf
(function (Modernizr) {
  // switch between height:100% and width:100% based on comparison of img and container aspect ratios
  function coverFillSwitch (container, img, invert) {
    if (!container || !img) return false

    var imgHeight = img.naturalHeight || img.videoHeight
    var imgWidth = img.naturalWidth || img.videoWidth
    var containerRatio = container.offsetWidth / container.offsetHeight
    var imgRatio = imgWidth / imgHeight

    var ratioComparison = false
    if (imgRatio >= containerRatio) ratioComparison = true
    if (invert) ratioComparison = !ratioComparison // flip the bool

    if (ratioComparison) {
      img.style.height = '100%'
      img.style.width = 'auto'
    } else {
      img.style.height = 'auto'
      img.style.width = '100%'
    }
  }

  function objectFitResize () {
    var i, img, container

    var imgsCover = document.getElementsByClassName('object-fit__cover')
    for (i = 0; i < imgsCover.length; i++) {
      img = imgsCover[i]
      container = img.parentElement
      if (container.classList.contains('object-fit__container')) {
        coverFillSwitch(container, img)
      }
    }

    var imgsContain = document.getElementsByClassName('object-fit__contain')
    for (i = 0; i < imgsContain.length; i++) {
      img = imgsContain[i]
      container = img.parentElement
      if (container.classList.contains('object-fit__container')) {
        coverFillSwitch(container, img, true)
      }
    }
  }

  // add absolute center image css properties
  function applyStandardProperties (container, img) {
    var containerStyle = window.getComputedStyle(container)
    if (containerStyle.overflow !== 'hidden') container.style.overflow = 'hidden'
    if (containerStyle.position !== 'relative' &&
      containerStyle.position !== 'absolute' &&
      containerStyle.position !== 'fixed') container.style.position = 'relative'
    img.style.position = 'absolute'
    img.style.top = '50%'
    img.style.left = '50%'
    img.style.transform = 'translate(-50%,-50%)'
  }

  function objectFitInt () {
    var imgs = document.querySelectorAll('[class*="object-fit__"]')
    for (var i = 0; i < imgs.length; i++) {
      var type = 'cover'
      var img = imgs[i]
      var container = img.parentElement

      if (img.classList.contains('object-fit__container')) type = 'container'
      if (img.classList.contains('object-fit__cover')) type = 'cover'
      if (img.classList.contains('object-fit__fill')) type = 'fill'
      if (img.classList.contains('object-fit__contain')) type = 'contain'
      if (img.classList.contains('object-fit__none')) type = 'none'
      if (img.classList.contains('object-fit__scale-down')) type = 'scale-down'

      switch (type) {
        case 'container':
          break
        case 'cover':
          coverFillSwitch(container, img)
          applyStandardProperties(container, img)
          break
        case 'contain': // opposite of cover
          coverFillSwitch(container, img, true)
          applyStandardProperties(container, img)
          break
        case 'fill':
          img.style.height = '100%'
          img.style.width = '100%'
          applyStandardProperties(container, img)
          break
        case 'none':
          img.style.height = 'auto'
          img.style.width = 'auto'
          applyStandardProperties(container, img)
          break
        case 'scale-down':
          img.style.maxHeight = '100%'
          img.style.maxWidth = '100%'
          img.style.height = 'auto'
          img.style.width = 'auto'
          applyStandardProperties(container, img)
          break
        default:
          break
      }
    }
  }

  var resizeTimeout

  function resizeThrottler () { // @source https://developer.mozilla.org/en-US/docs/Web/Events/resize
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function () {
        resizeTimeout = null
        objectFitResize()
      }, 66) // The objectFitResize will execute at a rate of 15fps
    }
  }

  Modernizr.objectfit = Modernizr.testAllProps('objectFit') // detect IE and Edge
  if (!Modernizr.objectfit) {
    window.addEventListener('load', objectFitInt, false)
    window.addEventListener('resize', resizeThrottler, false)
  }
})(Modernizr)

I read uglify-js had no ES6 support. I'm really new to JS and webpack. That's why I use this boilerplate but my guess is babel dit not transpile before uglifying when running the build process.

What path do I use for background-image url?

Tried almost every combination, didnt't work

Found 1 high severity vulnerability (High │ Arbitrary File Overwrite )

Hello, I've been using this boilerplate a few times without any issues but today I've got these vulnerability issue and I couldn't manage to fix it...

High │ Arbitrary File Overwrite
Package │ tar
Patched in │ >=4.4.2
Dependency of │ node-sass [dev]
Path │ node-sass > node-gyp > tar
More info │ https://npmjs.com/advisories/803

Any help would be most welcome!

NFR

Thnx for this boilerplate!
Any plans for adding typescript support, font awesome and webpack-dashboard (when v4 support is ready)?

Use webpack-merge rather Object.assign

Webpack recommands the use of webpack-merge for merging different configuration files (c.f. here).
It is probably a good idea to use it insteal of Object.assign.

Edit index.js hot reload stop working

Hi guys!

Why if you edit index.js after comment area hot reload stop working?

To replicate:

1. download via curl
2. npm i
3. npm run dev
4. edit index.js adding console.log('test')

node version v9.11.1

Thank you

How to add ES6 support?

Hi. I am not very familiar of setting webpack config. I downloaded yours and it seems it is using es5 config .
How to add es6 support?
Thank you

`build` not copying certain image folders into `./dist`

I have the following project structure, which runs perfectly via npm run dev:

/project-name

  /assets

    /images
      /branding-icons
        [.gif files]
      /social
        [.png files]
      /stars
        [.png files]
      [various .svg, .jpg, .png files in root of /images]

    /styles
      /vendor
        [.css files]
      index.scss

    index.ejs
    ...

However, when I run npm run build, the /branding-images and /stars folders are ignored in the copy across; the /social sub-dir and all the file types in the root of /images copy over into /dist as expected.

I've looked at the Webpack configs, and I can't see anything obvious in there as to what's excluding certain directories from build that are served as expected from dev.

Any ideas?

Tested on both macOS 10.13.6 and latest Windows 10 Pro.

Webpack 4 update

Any plans to update?

Use EJS includes

Thanks for this boilerplate!

How to use EJS includes with it though?

I've tried to include an EJS template, like this:

<%- include('header'); -%>,

But then I get this error:

Html Webpack Plugin:
ReferenceError: include is not defined

I tried using ejs-loader - it stops giving this error but then nothing gets compiled.

Thanks

babel config

How many browsers is configured babel?
thanks

.includes not polyfilled?

I get the following:

Uncaught TypeError: ["ane","test"].includes is not a function

In this code:

return["ane","test"].includes(window.params.lid)

Isn't the ".includes" polyfilled?

Css bundle outside of js

Hello, is it possible extract css from js bundle?

this is my config.

add optimizations?

its possible add optimizations like in imagemin, autoprefixer, concat , allow to use inline images on css?

Does not create es2015

From usage:

git clone https://github.com/cvgellhorn/webpack-boilerplate.git
cd webpack-boilerplate
npm install
npm run build

The js-files in dist/ are not babeled to ES5.

Images not copied to dist folder after built

When I go to run npm run build, only the .jpg files get copied to the dist folder, the rest of the images in ./assets/images do not get built and copied to ./dist/assets/images. Any insight as to why?

Giant images on the screen every time website is loaded

Hello @cvgellhorn ! First of all thanks for this cool boilerplate!!!

I only have a little issue, every time I reload or load the website. Basically the icons that I have on the top right of the cover page appear for a second or two in a giant format, then they disappear and re-appear correctly in their place in their correct measure.

Do you know what can this issue be? Where can I look into in order to start debugging?

Here is a screenshot, this happens for a second every time the page is loaded or refreshed. Then the correct homepage appears.

Thanks for the help!! :)