template-web-dotenv

Final version template of webpack to build a web page

Table of contents

1. About
2. Installation
3. Structure of project
4. Updates
5. Others

About

Template to create web page with Webpack's environment and dotenv-webpack library to global variables.

Installation

1. Install libraries

    npm install

2. Run project

    npm start

3. Build project

    npm run build

4. Optionals
   • 4.1. Create files: .env.development.local and .env.production.local to global variables

Structure of project

├── build                               # code for production
├── config-webpack                      # setup of webpack
│   ├──  webpack.dev.js                 # setup only for dev
│   └──  webpack.prod.js                # setup only for prod
├── docs                                # screenshots of updatings
├── node_modules                        # libraries after of installing with npm install
├── files-to-build                      # files to copy in build folder, e.g: manifest.json
├── src                                 # code for development
│   ├──  img                            # folder to images
│   │    └── favicon                    # folder to favicon’s
│   ├──  js                             # only files javascript
│   │    └── main.js                    # javascript file root
│   ├──  styles                         # only files css
│   │    ├── main.css                   # css
│   │    └── normalize.css              # css to normalize the styles of web page
│   └──  index.html                     # html file root
├── .env.development.local              # development global variables
├── .env.production.local               # production global variables
├── .gitignore                          # ignore files
├── babel.config.json                   # setup of library babel
├── LICENSE                             # License MIT
├── manifest.json                       # info about the web page
├── package.json                        # file setup of profect
├── postcss.config.js                   # setup of library postcss
└── README.md                           # info of project

Update

Each six months it tries to update all project with npm-check-updates library.

Others

• Info about browserlist:

https://github.com/browserslist/browserslist#browsers-data-updating

• Global variables manages with dotenv-webpack