cvgellhorn / webpack-boilerplate Goto Github PK
View Code? Open in Web Editor NEWA minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
License: MIT License
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
License: MIT License
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
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?
How many browsers is configured babel?
thanks
Hello, is it possible extract css from js bundle?
this is my config.
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.
its possible add optimizations like in imagemin, autoprefixer, concat , allow to use inline images on css?
Hi guys!
Why if you edit index.js after comment area hot reload stop working?
To replicate:
node version v9.11.1
Thank you
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/* ./
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?
Tried almost every combination, didnt't work
Any plans to update?
Thnx for this boilerplate!
Any plans for adding typescript support, font awesome and webpack-dashboard (when v4 support is ready)?
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
.
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.
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.
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!! :)
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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.