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上查詢）；