webpack - 安裝、實現功能：ES6轉ES5

# 安裝

前提，安裝node.js

npm init -y

 npm i webpack webpack-cli --save-dev

目錄結構這樣 就ok了

# es6 轉成 cs5

我們這裏的目的是： 把es6的語法 編譯成 es5的語法

這樣可以讓 js 腳本兼容舊版本瀏覽器

## 修改 package.json

package.json
scripts 屬性 中添加 屬性

"dev": "webpack --mode development --watch"

其中：

• --watch 添加監聽（src修改了，會重新編譯）

## 構建目錄

項目路徑添加目錄

• dist - 打包的目錄
• src - 源文件目錄
  如存放：
  index.js
Style.js (一個模塊)
  ...

## index.js

src/index.js 文件是 webpack 的入口文件

在src下添加兩個文件

index.js

import Style from './Style' ;
new Style().init();

Style.js

export default class Style {
  constructor(){}
  init() {
    document.body.style.backgroundColor = 'red' ;
  }
}

## 編譯

先前在 package.json 裏面 配置了 dev 命令

下面使用命令

npm run dev

執行完後 在 dist/ 目錄下生成 main.js 文件

我們這裏的目的是： 把es6的語法 編譯成 es5的語法
這裏的 main.js 裏面就是 es5 的語法

## 效果

es5 的 js 直接引用即可（下圖）