Giter VIP home page Giter VIP logo

html-sass-babel-webpack-boilerplate's Introduction

Webpack boilerplate with SASS(SCSS), HTML modules, Babel

Features

  • Easy to start yarn install + yarn start (npm install + npm start)
  • Don't worry about webpack config, just code
  • Custom HTML Modules plugin
        <!DOCTYPE html>
        <html>
        <head>
            <title>Example doc</title>
        </head>
        <body>
            <include>_header.html</include>
            <h1>Catalog products</h1>
            <include>_products-filter.html</include>
            <include>_products-list.html</include>
            <include>_footer.html</include>
        </body>
        </html>
  • HTML hot reload(Livereload)
  • SCSS (SASS)
  • jQuery already installed
  • Babel
    • ES6
    • ES7
    • Class syntax + Class properties
    • etc
  • Autoprefixer
  • Minifier
  • PostCSS
  • Eslint (airbnb-base config)
  • Eslinting on the fly (while dev)
  • Pretty console output (Friendly errors webpack plugin)

Adding libraries to JS

  1. Find the desired library at https://www.npmjs.com/ (example: https://www.npmjs.com/package/moment)
  2. Install yarn add moment or npm install moment
  3. Import library into your code import moment from 'moment'
  4. Use it

Usage

Installation

npm install
or
yarn

Start dev server for development

npm start
or 
yarn start-yarn

Build

npm run build
or
yarn build

html-sass-babel-webpack-boilerplate's People

Contributors

izica avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

html-sass-babel-webpack-boilerplate's Issues

HTML entities are being added to compiled HTML

Thanks for the fantastic boilerplate!

I'm having a slight issue though which HTML. It is adding some strange entities into my compiled HTML... is the character it seems to be adding and it's displaying as squares in between the text of my site.

This is coming from the bundle.js file, where \v is being added between the HTML strings.

Can you please help?

Compile to mutiple CSS files

Hi there,

Great starter pack, thanks for creating!

Can I ask, how would I compile .scss files into multiple .css files?

e.g:

app.scss > app.css
print.scss > print.css

Thanks!
Tom

Css background URL

When i build project, css background image urls not match with /dist folder hierachy so imges not shown.

Example:
i using in development like: url('assets/img/logo.png')

it builded same like that development: url('assets/img/logo.png')

Expectation is: url('../img/logo.png')

Favicon setup

Edit: Was having some trouble with the webpack config but I figured it out, thanks for the repo.

RangeError: Maximum call stack size exceeded

I'm adding to error message i think that happen add new .html file to project. If you need to show file i will share my private github repo with contributers.

Html Webpack Plugin:
Error: Child compilation failed:
Module build failed (from ./webpack/loader/html-loader.js):
RangeError: Maximum call stack size exceeded

  • html-loader.js:10 resolve
    C:/code/sevimlikutu-html/webpack/loader/html-loader.js:10:38

  • Array.forEach

  • html-loader.js:9 forEach
    C:/code/sevimlikutu-html/webpack/loader/html-loader.js:9:18

  • html-loader.js:12 insertIncludes
    C:/code/sevimlikutu-html/webpack/loader/html-loader.js:12:30

  • Array.forEach

  • html-loader.js:9 forEach
    C:/code/sevimlikutu-html/webpack/loader/html-loader.js:9:18

  • html-loader.js:12 insertIncludes
    C:/code/sevimlikutu-html/webpack/loader/html-loader.js:12:30

  • Array.forEach

  • RangeError: Maximum call stack size exceeded

  • compiler.js:79 childCompiler.runAsChild
    [sevimlikutu-html]/[html-webpack-plugin]/lib/compiler.js:79:16

  • Compiler.js:306 compile
    [sevimlikutu-html]/[webpack]/lib/Compiler.js:306:11

  • Compiler.js:631 hooks.afterCompile.callAsync.err
    [sevimlikutu-html]/[webpack]/lib/Compiler.js:631:15

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [sevimlikutu-html]/[tapable]/lib/Hook.js:154:20

  • Compiler.js:628 compilation.seal.err
    [sevimlikutu-html]/[webpack]/lib/Compiler.js:628:31

  • Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [sevimlikutu-html]/[tapable]/lib/Hook.js:154:20

  • Compilation.js:1329 hooks.optimizeAssets.callAsync.err
    [sevimlikutu-html]/[webpack]/lib/Compilation.js:1329:35

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.