webPack学习笔记 ——loader中的babel-loader应用

前言

webpack 前端工程化打包的一项重要技术

今天给大家来学习一下关于babel-loader的应用，也是在者方面进行了踩坑

流程

流程分为三步

• 安装 babel-loader 、 @babel/core、@babel/plugin-proposal-decorators
• 配置 规则
• 新建babel.config.js 配置插件

操作流程

安装

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在webpack.config.js 中 定义规则

   module:{
        rules:[
            {
                test: /\.js$/,use: "babel-loader",exclude: "/node_modules/"
            }
        ]
    }

创建babel.config.js 中 配置插件

module.exports = {
    //声明 babel可用的插件
    plugins: [['@babel/plugin-proposal-decorators',{legacy: true}]]
}

参考： 插件文档

之后打包一下就行拉

结束语

关于 webPack学习笔记 ——loader中的babel-loader应用 就讲到这里，对你有帮助的话！

• 点赞
• 收藏

谢谢你的观看！