Light

mwieth / webpack-4-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

51.0 2.0 20.0 2.7 MB

:rocket: Webpack 4 with ES6+ and SASS,LESS/STYLUS support + dev-server and livereload

License: MIT License

JavaScript 84.11% HTML 9.67% SCSS 6.22%

webpack bundler webpack4 webpack-loader webpack-starter boilerplate

webpack-4-boilerplate's Introduction

Webpack 4 Boilerplate ES6/Sass with build-in option to change preprocessor (less/stylus)

This Webpack 4 Boilerplate comes with 2 builds:

npm run build:dev

-> starts dev server on localhost:8080 with livereload, sourcemap

npm run build:prod

-> creates prod files to /dist with:

compiles sass/stylus/less to css
autoprefixer for vendor prefixes (browser compability)
compiles ES6+ to ES5
minifying for css/js
uglyfing js code
hash css and js file (file versioning for browser caching -> cache busting)

Setup

git clone https://github.com/mwieth/Webpack-4-boilerplate.git
cd Webpack-4-boilerplate
npm install
//start dev mode
npm run build:dev

Preprocessor support (default: Sass)

--> if u want to change to less run:

npm install less less-loader --save-dev
npm uninstall node-sass sass-loader
set selectedPreprocessor in \webpack\loader.js to less
change default files in styles from sass to less (*.less) and update import in index.js line 1

--> if u want to change to stylus run:

npm install stylus stylus-loader --save-dev
npm uninstall node-sass sass-loader
set selectedPreprocessor in \webpack\loader.js to stylus
change default files in styles from sass to stylus (*.styl) update import in index.js line 1

--> if u want to use the 'original' loose _.sass syntax just change the files from _.scss to _.sass and update the import in index.js line 1

webpack-4-boilerplate's People

Contributors

Stargazers

Watchers

webpack-4-boilerplate's Issues

Stylesheet Missing

Hi, the stylesheet appears to be missing when running npm run build:dev, npm run build:prod is ok.

Vendor chunk url not output in html file

When any external modules such as packages in node_modules are bundled a vendor chunk is created, but there's no url for the vendor file in the resulting html - the href value is simply empty i.e. <script defer src=""></script>

To recreate this issue install a module such as lodash, import it into index.js, run npm run build:prod and inspect the index.html file in the dist folder.

Multipage and multi entrypoint

I want to ask you How can I add new HTML files and new entry points. There are such strings in main HTML

<script defer src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>

I am not good with those things and I dont know how to split my code.

looped and disconnected

while on npm run build: dev i got errors and looped

Build is failed

Build is failed. Files are directly cloned without any touch. Am i missing some things?

Images issue

Hi,

I'm using this great webpack boilerplate but I have a problem with images.
How can I use them in dev mode?
I copy the logo in the src dir and on my html I try these:
<img src="logo.png" alt="" />
<img src="./logo.png" alt="" />
But no image appear on localhost live dev.

Thanks

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.