webpack配合babel使用

1、babel介紹

①Babel 是一個 JavaScript 編譯器，能夠把ES6的語法轉爲兼容瀏覽器的ES5語法

②Babel中文官網：https://www.babeljs.cn/

③Babel能夠單獨使用，可是通常都是和webpack結合一塊兒使用

2、webpack裏使用babel

一、babel-loader babel-core babel-preset-env （轉換語法）

①安裝依賴：

// 已經在項目裏安裝了webpack的狀況下
npm install --save-dev babel-loader babel-core babel-preset-env

②配置

// 該文件其實最終是要在node環境下執行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 導出一個具備特殊屬性配置的對象
module.exports = {
    entry:'./src/main.js',/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:'bundle.js'/* 打包的結果文件名稱 */
    },
    devServer:{
        // 配置webpack-dev-server的www目錄
        contentBase:'./dist'
    },
    plugins:[
        // 該插件能夠把index.html打包到bundle.js文件所屬目錄，跟着bundle走
        // 同時也會自動在index.html中注入script引用連接，而且引用的資源名稱，也取決於打包的文件名稱
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：這裏的順序很重要，不要亂了順序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            { test:/\.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目錄
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'] //轉碼規則
 } }
            }
        ]
    }
}

③打包

npm run build

二、babel-polyfill 來提供低版本瀏覽器中的不支持API

①安裝依賴

npm install --save-dev babel-polyfill

②配置：這樣會在打包的時候提供一個墊腳片用以兼容低版本瀏覽器中不支持的API（兼容低版本瀏覽器的一個方法）

// 該文件其實最終是要在node環境下執行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 導出一個具備特殊屬性配置的對象
module.exports = {
    entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:'bundle.js'/* 打包的結果文件名稱 */
    },
    devServer:{
        // 配置webpack-dev-server的www目錄
        contentBase:'./dist'
    },
    plugins:[
        // 該插件能夠把index.html打包到bundle.js文件所屬目錄，跟着bundle走
        // 同時也會自動在index.html中注入script引用連接，而且引用的資源名稱，也取決於打包的文件名稱
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：這裏的順序很重要，不要亂了順序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目錄
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'] //轉碼規則
                    }
                }
            }
        ]
    }
}

③打包

npm run build

三、transform-runtime解決代碼重複問題

①在打包的過程當中，babel會在包裏提供一些工具函數，而這些工具函數可能會重複的出如今多個模塊。

②這樣會致使打包的體積過大，因此babel提供了babel-transform-runtime解決這個體積過大的問題

③安裝依賴

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

④配置

// 該文件其實最終是要在node環境下執行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 導出一個具備特殊屬性配置的對象
module.exports = {
    entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:'bundle.js'/* 打包的結果文件名稱 */
    },
    devServer:{
        // 配置webpack-dev-server的www目錄
        contentBase:'./dist'
    },
    plugins:[
        // 該插件能夠把index.html打包到bundle.js文件所屬目錄，跟着bundle走
        // 同時也會自動在index.html中注入script引用連接，而且引用的資源名稱，也取決於打包的文件名稱
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：這裏的順序很重要，不要亂了順序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目錄
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'], //轉碼規則
                        plugins:['transform-runtime']
                    }
                }
            }
        ]
    }
}

 四、配置cacheDirectory能夠節省webpack打包編譯時間，默認把打包的結果緩存到node_modules/.cache模塊下

// 該文件其實最終是要在node環境下執行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

// 導出一個具備特殊屬性配置的對象
module.exports = {
    entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:'bundle.js'/* 打包的結果文件名稱 */
    },
    devServer:{
        // 配置webpack-dev-server的www目錄
        contentBase:'./dist'
    },
    plugins:[
        // 該插件能夠把index.html打包到bundle.js文件所屬目錄，跟着bundle走
        // 同時也會自動在index.html中注入script引用連接，而且引用的資源名稱，也取決於打包的文件名稱
        new htmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：這裏的順序很重要，不要亂了順序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目錄
                use:{
                    loader:'babel-loader',
                    options:{
                        cacheDriectory:true,
                        presets:['env'], //轉碼規則
                        plugins:['transform-runtime']
                    }
                }
            }
        ]
    }
}