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