webpack簡單應用

安裝
```
npm install webpack --save -dev
yarn add webpack --dev    
```

### 編譯ES6 > ES5
安裝
```
npm install babel --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev

yarn add babel --dev
yarn add babel-core --dev
yarn add babel-loader --dev
```

### 識別es2015
```
npm install babel-preset-es2015 --save-dev

yarn add babel-preset-es2015 --dev

```

###配置一下語法編譯
.babelrc 文件
```
{ "presets": ["es2015"]}
```
###解析ES7
```
stage-0; 範圍更大
stage-1;
stage-2;
stage-3;
stage-4; 範圍最小 

npm install babel-perset-stage-0 --save-dev

yarn add babel-preset-stage-0 --dev

```

### 解析css
安裝
```
//編譯css的
npm install css-loader --save-dev

//構造一個style標籤將編譯後的css 放進來
npm install style-loader --save-dev
```

### 解析css的預處理
- less
- sass
- stylus

```
npm install less --save-dev
npm install less-loader --save-dev

```

### 解析圖片
```
npm install file-loader --save-dev
npm install url-loader --save-dev  (依賴上面的)

```
### 安裝解析html插件
以我們自己寫的html作爲模板 再把打包後的js引入到 html中生成一個新的html文件(在dist文夾下) 上線使用的
```
npm install html-webpack-plugin --save-dev

```
### webpack開發服務
安裝
在內存中打包不會顯示dist
```
npm install webpack-dev-server --save-dev

```