用webpack 处理js

安装babel-loader ,以及参数@babel/core,@babel/preset-env ：

npm install babel-loader @babel/core @babel/preset-env --save-dev

注意package.json 中的版本号：
core 和 preset-env 的版本一定不能高于babel-loader 的版本，否则报错， Error: options/query provided without loader (use loader + options) in。。。
如果版本不对，要卸载,然后重新安装

npm uninstall babel-loader --save-dev
npm uninstall @babel/core --save-dev
npm uninstall @babel/preset-env --save-dev

在在 package.config.js 中配置babel:

module:{
        rules:[ 
            {
                test:/\.css$/,
                use: [
                     MiniCssExtractPlugin.loader, // 代替style-loader
                    "css-loader" , "postcss-loader"
                  ]
            },
            {
                test:/\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, // 代替style-loader,
                    "css-loader",  
                    "less-loader" // 
                  ]
            }
        ]
    }

此时写一个es6规范的语句：

let fn = () => { //es6 规范
    console.log('log');
}

编译脚本，发现index.js 中上述 语句被转化成了es5 的格式：

class A { //es6 规范
    a = 1;
}
let AA = new A();
console.log(AA.a);

提示错误，需要安装 @babel/plugin-proposal-class-properties，于是安装：

npm install @babel/plugin-proposal-class-properties --save-dev

还需要在package.config.js 中配置一下：

 			use:{
                    loader: "babel-loader",
                    options:{
                        presets:['@babel/preset-env'],
                        plugins:['@babel/plugin-proposal-class-properties']
                    }
                }

好了，编译，此时查看bundle.js 中被乖乖的转化成es5 的形式：

@log
class A { //es6 规范
    a = 1;
}

缺少装饰器：(参考 https://babeljs.io/docs/en/babel-plugin-proposal-decorators)

npm install --save-dev @babel/plugin-proposal-decorators