Giter Site home page Giter Site logo

nazarenkodima / essential-webpack-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sandrina-p/essential-webpack-boilerplate

0.0 1.0 0.0 2.27 MB

Minimal starter boilerplate with Webpack 3, PostCSS 6, Babel and Jest ready to go

License: MIT License

JavaScript 38.99% HTML 5.41% CSS 55.60%

essential-webpack-boilerplate's Introduction

Essential Webpack 3 + PostCSS boilerplate

A super minimal and basic boilerplate that I use as starter-kit on my personal projects! ๐Ÿ˜Ž

What is rocking here

Extras

  • Babel - Use next generation JavaScript, today.
  • BrowserSync - Time-saving synchronised browser testing.
    • Tunnel - Make your website online through a random Public URL
  • Jest with (Babel) - Delightful JavaScript Testing
  • ESLint - The pluggable linting utility for JavaScript and JSX
  • StyleLint - A mighty, modern CSS linter and fixer in your stylesheets.

How to rock

  • git clone https://github.com/sandrina-p/essential-webpack-boilerplate.git your-project
  • cd your-project - go to /your-project folder
  • npm install - get everything to run the project
  • npm start - run the project... wait a few seconds
  • A tab on Chrome should open - http://localhost:3001/ - you can rock with it ๐Ÿ’ฅ
  • npm test - don't forget to test your code โš™๏ธ
  • npm run build - set all the code ready and minified into /build folder

Before you start

How to Add Multiple files

This boilerplate is set for only 1 page: index.html but is easy to add more pages. You just need to add the HTML and JS files to config/webpack.config.js:

Add HTML file

  • On line 83 you have all your project Pages. Each new HtmlWebpackPlugin is used to create a new page.
// YOUR PROJECT PAGES
new HtmlWebpackPlugin({
    chunks: ['index'], // where it is reading the JS files from
    template: './index.html', // location of the HTML file
}),

To add a Page, add a new instance of HtmlWebpackPlugin and create your HTML file. In this case the file is at ./pages/my-page/index.html.

new HtmlWebpackPlugin({
    chunks: ['index'],
    template: './index.html',
}),
new HtmlWebpackPlugin({
    chunks: ['my-page'],
    template: './pages/my-page/index.html',
}),

Add JS file

chunks: ['my-page'] refers to the key of your JS file entry point (line 26). There you set the entry points for your project. Each entry point is a JS file.

Just add a new entry-point with the same name as the chunks value used on the step before.

entry: {
    'index': './index.js',
    'my-page': './pages/my-page/index.js',
},

That's it! Save the file, npm start again and keep rocking at http://localhost:3001/pages/my-page/index.html

Different HTML Files, same JS file

You also can have HTML files that use the same JS file:

new HtmlWebpackPlugin({
    chunks: ['index'],
    template: './index.html',
}),
new HtmlWebpackPlugin({
    chunks: ['index'], // read from the same entry point as `index.html`
    template: './pages/my-page/about.html',
}),

Suggestions & Questions

Just create an issue.


Have fun!

essential-webpack-boilerplate's People

Contributors

sandrina-p avatar briancodes avatar

Watchers

James Cloos avatar

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.