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 直接引用即可（下图）