webpack中的加载器,处理js高级语法webpack不兼容的 - 前端笔记-打包js文件中的高级语法:在编写js的时候,有时候我们会使用高版本的js语法 有可能这些高版本的语法不被兼容,我们需要将之打包为兼容性的js代码 我们需要安装babel系列的包 A...

学习笔记

点滴记忆
回忆过往
首页>> >>webpack中的加载器,处理js高级语法webpack不兼容的 - 前端笔记
2020-1-9
分类:

webpack中的加载器,处理js高级语法webpack不兼容的

文章作者:痴迷

打包js文件中的高级语法:在编写js的时候,有时候我们会使用高版本的js语法 有可能这些高版本的语法不被兼容,我们需要将之打包为兼容性的js代码 我们需要安装babel系列的包 A.安装ba......

打包js文件中的高级语法:在编写js的时候,有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容,我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包

A.安装babel转换器
    npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数,只有小于limit值的图片,才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项,意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » webpack中的加载器,处理js高级语法webpack不兼容的
版权所有:《前端笔记
文章标题:《webpack中的加载器,处理js高级语法webpack不兼容的
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-54.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)