Webpack之Javascript的编译Target是preset的核心配置，告诉preset编译的具体目标。

ES6的编译

ES6语法的编译

需要安装的包

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

Presets

如果单纯的babel-loader发现并没有将es6转为es5，这个时候还需要babel-preset；
Presets是存储Javascript不同标准的插件，通过使用正确的Presets,告诉babel按照哪个规范编译；

常见规范
es2015 es2016 es2017 env（通常采用） babel-preset-stage
babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5;

安装Presets

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

效果图
通过配置将es6的箭头函数语法编译为es5的写法
配置：

打包的js

配置项中的target
Target是preset的核心配置，告诉preset编译的具体目标。
Target可以：
1、以browsers为目标（通常情况）；
2、以node版本为目标；
3、以特定的浏览器为目标；

打包的js

babel-presets只能够编译语法，对于es6的一些新方法是无能为力的

ES6方法的编译

babel-polyfill

安装包

npm install babel-polyfill --save-dev

原理
生成一个全局对象，用es5实现所有的es6方法，然后挂在全局对象下
场景
一般用于项目开发
使用
在入口文件引入即可

也可以在配置文件中引入

babel-transform-runtime

原理
在app.js中生成一个局部作用域，然后只对app.js中使用到的es6方法用es5重写，这样不会特别增大文件的体积
场景
会用在框架开发
使用
作为babel的插件只能够写在babel的options中；
babel的options越写越多，不美观，所以我们单独抽取一个文件来，因此.babelrc文件诞生

//其实就是options:{}里面的内容
 {   
    "presets":[
        ["@babel/preset-env",{
            "targets":{
               
                //全球市场率大于1%的浏览器作为目标
                "browsers":[">1%"]
                //如果以node 10为目标，是支持es6的语法的，就不会编译为es5了
                // node:'10',
                //chrome59 是支持es6的语法的，就不会编译为es5了
                // chrome:'59'
            }
        }]
    ],
    "plugins":[
        ["@babel/transform-runtime"]
    ]
}

编译语法糖

比如ts编译

Typescript是Javascript的一个超集，让我们可以用强类型的写法写Javascript,与之类似的有jsx,vue等
1、安装loader(安装typescript和ts-loader)；

cnpm i typescript ts-loader --D

2、写入配置文件（在wepack.config.js中写入ts-loader）；

module.exports = {
    // entry:'./app.js',
    // entry:['./app.js','./app2.js'],
    //这个比较常用
    entry:{
        app:'./index.js',
        // app:['babel-polyfill','./index.js'],
        // app2:'./app2.js'
    },
    output:{
        //path是一个绝对路径，如果没有path，则path默认为__dirname+dist
        // path:__dirname+'/src/bundle',
        // filename:'bundle.js'
        //name为entry中的指向key值,hash为默认随机字符串，hash:4为截取前4个
        filename:'[name].[hash:4].js'//app.hkgd.js
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude:'/node_modules/',
                //use 是使用哪个loader来处理对应的文件
                use:{
                    loader:'babel-loader',                                     
                }
            } ,
            {
                test:/\.tsx?$/,          
                use:'ts-loader',              
            }          
        ]
    },
    plugins:[
        // new webpack.DefinePlugin({
        //     'process.env':require('../config/dev.env')
        // }),
        // new webpack.HotModuleReplacementPlugin()
    ]
}

3、编写tsconfig.json(类似于.babelrc,ts-loader的额外配置）；

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5"
    },
    "exclude": ["./node_modules/"]
}

一些常见的javascript语法糖编译

1、安装对应的loader 比如vue-loader和Jsx-loader；
2、写入配置文件(在webpack.config.js中写入对应的loader处理)；
3、根据loader规则写配置（可在loader的npm或github上查询）；