webpack配合babel使用

一、babel介紹

①Babel 是一個 JavaScript 編譯器，可以把ES6的語法轉為兼容瀏覽器的ES5語法

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

③Babel可以單獨使用，但是一般都是和webpack結合一起使用

二、webpack里使用babel

1、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

2、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

3、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']
                    }
                }
            }
        ]
    }
}

 4、配置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']
                    }
                }
            }
        ]
    }
}