Webpack之Javascript的编译

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能够：
一、以browsers为目标（一般状况）；
二、以node版本为目标；
三、以特定的浏览器为目标；

打包的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等
一、安装loader(安装typescript和ts-loader)；

cnpm i typescript ts-loader --D
复制代码

二、写入配置文件（在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()
    ]
}
复制代码

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

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

一些常见的javascript语法糖编译

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