Webpack work template
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Author: Vedees | Youtube guide (ru)
## Features:
- separated configs for `dev` and `prod`
- `typescript / javascript` full support
- `sass / css` full support
- full babel & postcss setup
- 0 dependencies
- the best optimization for your production
- easy webpack and babel customization
Everybody knows that developing runs on coffee! Thanks for your support!
[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]
## Build Setup:
```bash
# Download repository:
git clone https://github.com/vedees/webpack-template webpack-template
# Go to the app:
cd webpack-template
# Install dependencies:
# npm install
# or:
yarn
# Server with hot reload at http://localhost:8084/
# npm run start
# or:
yarn start
# Output will be at dist/ folder
# npm run build
# or:
yarn build
```
## Project Structure:
- `public/*.html` - HTML files
- `src/app` - core app
- `src/shared` - shared files
- `src/shared/img` - images folder (! for html calls use correct path: `static/img/some.jpg`)
- `src/shared/misc` - misc files (i.g. favicon, sitemap, etc.)
- `src/index.ts` - main app entity
Configs:
- `/babel-defines.js` - config for babel
- `/webpack/webpack-pages.js` - config for html pages
- `/webpack/webpack-defines.js` - config for entire webpack
Main entry point:
- `src/app/index.ts` - core entry point
## Defines:
Core webpack config from `/webpack/webpack-defines.js`:
```js
const PATHS = {
// path to the src dir
src: path.join(__dirname, '../src'),
// path to the output dir
dist: path.join(__dirname, '../dist'),
// path to the public files (html files)
public: path.join(__dirname, '../public'),
// path to output sub dir (js, css, fonts, etc.)
assets: 'assets/',
// path to output sub dir (img, icons, etc.)
static: 'static/'
}
```
## Pages config:
Pages config from `/webpack/webpack-pages.js`:
```js
const pages = [
{
// page title
title: 'Home page',
// template name `public/index.html`
template: 'index.html',
// output filename `dist/index.html`
filename: 'index.html',
// other options can be here
},
{
title: 'About page',
template: 'about.html',
filename: 'about.html',
}
]
```
You can pass a hash of configuration options to html-webpack-plugin.
Allowed values are as follows: https://github.com/jantimon/html-webpack-plugin#options
## Manual pages setup:
In case if you don't want to use Pages config:
1. Create another html file in `./public`
2. Go to `./webpack/webpack.common.js`
3. Add new page to the config:
```js
// index page:
new HtmlWebpackPlugin({
title: 'Home page',
favicon: defines.src + '/shared/misc/favicon.ico',
template: defines.public + '/index.html', // public/index.html page
filename: 'index.html' // output file
}),
// about page:
new HtmlWebpackPlugin({
title: 'About page',
favicon: defines.src + '/shared/misc/favicon.ico',
template: defines.public + '/about.html', // public/about.html page
filename: 'about.html' // output file
}),
```
## Import libs example:
Install it:
```bash
yarn add bootstrap react react-dom
```
Import libs to `src/app/index.ts`:
```js
// React example
import React from 'react'
// Bootstrap example (with custom js imports)
import Bootstrap from 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
```
## Import SASS / CSS libs example:
Import libs to `src/app/index.scss`:
```scss
// sass lib import example:
@import '../../node_modules/spinners/stylesheets/spinners';
// css lib import example:
@import '../../node_modules/flickity/dist/flickity.css';
```
## React example:
Here's an example with React + i18n Provider.
Install react:
```bash
yarn add react react-dom
```
Create div with id `app` in `public/index.html`:
```html