webpacak将ES6转ES5

webpack将es6转换成es5

webpack 是支持es6的模块的写法的，但是当前的浏览器不支持，所以想要将用es6方式写的模块代码在浏览器运行起来，要先使用webpack进行打包

babel

es6的一个编译器，这个东西有自己的独立的运行功能 可以下载 babel-cli,来进行es6的代码转换工作！

babel+webpack

1. 下载需要的依赖包，命令如下

npm install babel-loader babel-core -D

1. 新建一个webpack.config.js文件，配置loader

module:{
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader'
        }
    ]
}

3.我们需要创建一个.babelrc文件，配置.babelrc (因为babel-core需要使用到这个配置文件)

presets： babel在进行代码转换的时候，需要遵守一些规则，这些规则有现成的，
babel-preset-es2015
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3

上面的这些都不需要再用了，只需要一个即可
babel-preset-env

需要先下载

npm install babel-preset-env -D

配置方式一：
{
    presets: [
    "env"
    ]
}

配置方式二：
{
  "presets": [
    ["env", {
      "targets": {
    "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

1. 执行webpack 进行打包即可（webpack全局安装）！

webpack本地安装之后如何执行

webpack官方推荐本地安装

npm install webpack -D

本地安装之后如何运行

1. package.json中的scripts
   我们可以在package.json中的scripts属性中配置一些相应的shell命令

   想要运行这些配置好的命令的时候，只需要 npm run 指令的名称

   运行命令的时候，npm会自动启动一个shell，将这些命令内容作为shell脚本来使用， 这个shell的path中会自动加入我们当前项目中的 ./node_modules/.bin/

2. 如果想要在本地安装后执行webpack

{
    scripts: {
        "dev": "webpack"
    }
}

3.直接用npm run dev命令运行