https://github.com/alesanchezr/webpack-ready

https://github.com/alesanchezr/webpack-ready

Last synced: 13 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/alesanchezr/webpack-ready
• Owner: alesanchezr
• Created: 2017-11-20T22:04:28.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-24T19:10:31.000Z (almost 7 years ago)
• Last Synced: 2024-10-04T02:21:13.966Z (about 1 month ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Using Webpack for the first time

This repository is an idea scenario to start working with webpack in 5 minutes.

It comes with an template structure of folders and files for any project that uses: HTML + JS + CSS3 + SASS

## Step by Step

1. Clone this repository as a template and get inside the project

```

$ git clone [email protected]:alesanchezr/webpack-ready.git

$ cd webpack-ready

```

Run npm install to download all the dependency libraries

```

$ npm install

```

Change the remote to you repository

```

$ git remote set-url origin 

```

Create your first bundle

```

$ npm run transpile-dev

```

Check that a public/bundle.js file has been created by Webpack. Read the output from the console that must be similar to this:

```sh

> [email protected] transpile-dev /home/ubuntu/workspace

> webpack --config webpack.config.js

Hash: 64f06c46f625967b3aeb

Version: webpack 3.8.1

Time: 99ms

    Asset     Size  Chunks             Chunk Names

bundle.js  2.52 kB       0  [emitted]  main

   [0] ./src/app.js 51 bytes {0} [built]

```

### NOTE: You have to re-bundle every time yo update your JS or CSS/SASS files.

You are ready to go! You can commit & push to your new repository whenever you want.

## How to continue?

The application flow starts at **app.js**, you have to import any other files or assets into app.js in order for webpack to include them in the bundle.

For example, inside app.js you can do:

```js

    //This will include file.js into your bundle.

    import 'js/file2.js';

    

    //this will include the styles at index.scss to your bundle.

    require('../styles/index.scss');

```

1. All your JS and CSS code must go inside the src/ directory, and webpack will automaticly bundle them and export them into the public folder.

2. The HTML code must be inside public/index.html