webpack es6=>es5的方法

注意：要先npm init后，在项目里先安装webpack

npm install webpack --save-dev

1.利用babel-cli转化

1.安装

"babel-cli"

npm i --save-dev babel-cli

"babel-preset-es2015"

npm i --save-dev babel-preset-es2015

"babel-preset-stage-2"

npm i --save-dev babel-preset-stage-2

2.配置babelrc

//.babelrc
{
    "presets": [
        "es2015",
        "stage-2"
    ],
    "plugins": []
}

3.配置package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src/es6 -d public"
  }

src/es6是 输入目录
-d表示directory
public 是输出目录

4.运行

npm run build

转化前

image.png image.png

转化后

image.png

2.利用babel-loader转化

1.安装依赖项

npm install --save-dev babel-core babel-preset-es2015 babel-preset-stage-2

 npm install --save-dev babel-loader

2.配置babelrc

//.babelrc
{
    "presets": [
        "es2015",
        "stage-2"
    ],
    "plugins": []
}

3.配置webpack.config.js

  module.exports = {
    entry: './src/js/app.js',
    output: {
        path: './dest',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    babel: {
     presets: ['es2015']
   },
}

4.启动webpack

webpack

可以压缩

webpack -p

或者配置在npm srcipt中

//package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src/es6 -d public",
    "webpack":"webpack -p"
  }

然后用npm run webpack启动就可以了。

以上~~~