# webpack-demo

**Repository Path**: zing-dev/webpack-demo

## Basic Information

- **Project Name**: webpack-demo
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-12-07
- **Last Updated**: 2021-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-demo

## Getting Started

### Basic Setup 
```
npm init -y
npm install webpack webpack-cli --save-dev
```

### Creating a Bundle
```
npm install --save lodash

npx webpack
```

### Using a Configuration 
```
npx webpack --config webpack.config.js

```

### NPM Scripts
```
npm run build
```

## Asset Management

### Loading CSS
```
npm install --save-dev style-loader css-loader
```

### Loading Images 
```
npm install --save-dev file-loader
```

### Loading Fonts 


### Loading Data 
```
npm install --save-dev csv-loader xml-loader
```

## Output Management

### Preparation 

### Setting up HtmlWebpackPlugin 
```
npm install --save-dev html-webpack-plugin
```

### Cleaning up the /dist folder 
```
npm install --save-dev html-webpack-plugin
```

## Development

### Using source maps

### Choosing a Development Tool
- webpack's Watch Mode
- webpack-dev-server
- webpack-dev-middleware

#### Using Watch Mode 

### Using webpack-dev-serve
```
npm install --save-dev webpack-dev-server
```

### Using webpack-dev-middleware
```
npm install --save-dev express webpack-dev-middleware
```


## Hot Module Replacement

### Enabling HMR 

### Via the Node.js API

### Gotchas

### HMR with Stylesheets 
```
npm install --save-dev style-loader css-loader
```


## Production

### Setup  
```
npm install --save-dev webpack-merge
```