es6 webpack转es5

更新时间：

2018-7-31 首次更新.

 

先生成package.json

npm init -y

 

再安装以下npm插件

 npm i babel-core babel-loader babel-preset-es2015 webpack -D && npm i -g webpack-cli

 

看起来应该是这样的（除版本号外），详细的配置文件不细说

webpack.config.js

const path = require('path');
module.exports = {
    // 入口
    // 一旦package.json里面配置了webpack --mode=production,下面的mode:'production'就不必了
    // mode:'production',
    entry:path.resolve(__dirname,'app.js'),
    output: {
        // 出口重命名js
        filename: 'bundle.js',
        // 出口文件夹名
        path:path.resolve(__dirname,'build'),
    },
    module:{
        rules:[
            {
                test:/(\.jsx|\.js)$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            "env"
                        ]
                    }
                },
                exclude:path.resolve(__dirname,"node_modules"),
                include:path.resolve(__dirname,"src")
            }
        ]
    }
}

 

 

 

入口文件为app.js，你可以随意写路径或者更改js.

 

运行命令：npm run start

正确的运行代码应该是这样的(无报错，无警告)，不过最开始运行时产生了一条警告（https://webpack.js.org/concepts/mode/）