Web前端工程化(十) - js文件中的高级语法的loader加载器

准备学习Web前端工程化的内容,做个记录,以后需要的时候方便查找:

webpack只能打包处理.js相关的文件,其他资源可以使用插件的方式来曲线救国。

1 安装babel转换器相关的包,运行命令:

npm i babel-loader @babel/core @babel/runtime -D

2 安装babel语法插件相关的包,命令如下:

 npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3 在项目根目录,创建并配置babel.config.js文件

module.exports = {

        presets:["@babel/preset-env"],

        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]

}

4 在webpack.config.js中,配置module -> rules数组, 添加loader规则如下:

rules:[

         // exclude为排除项, 表示babel-loader不需要处理node_modules中的js文件

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容