前言

在js文件中定义一个User类

import $ from 'jquery'
import './css/at.css'
import './css/at.less'
import './css/at.scss'
$(function() {$('li:odd').css('backgroundColor', 'blue')$('li:even').css('backgroundColor', 'lightblue')
})
class User {static info = 'User类'
}
console.log(User.info);

执行webpack npm run start 打包命令，查看结果如下：

从上面可以看出来，默认webpack处理不了这种高级的js语法，所以这里我们需要配置一下相关的loader来解析和转换js中的高级语法

打包处理js文件中的高级语法

① 安装babe1转换器相关的包: npm i babel-loader @babel/core @babel/runtime –D

② 安装babe1语法插件相关的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D

③在项目根目录中，创建babel配置文件babel. config.js并初始化基本配置如下:

module.exports = {presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

④在 webpack. config.js的module -> rules 数组中，添加loader 规则如下:
// exclude为排除项，表示babel- loader不需要处理node_ modules中的js文件

//所有第三方文件模块的匹配规则module:{rules:[//配置js高级语法{test: /\.js$/,use: 'babel-loader',exclude:/node_modules/}]    }

然后我们在运行npm run start 命令查看效果如下：

这样就看到js高级语法打印到控制台了

webpack打包处理js文件中的高级语法相关推荐

配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
使用webpack打包单个js文件
一.基础打包 1.1 创建项目目录,使用npm init初始化 mkdir webpack-demo && cd webpack-demo npm init 初始化完成后,目录下会生成 ...
idea中设置文件不检查语法_如何让IntelliJ忽略一个.js文件中的javascript语法错误？...
在我的IntelliJ项目中,我有这个文件: MyMvnModule\src\main\webapp\WEB-INF\Owasp.csrfguard.js 此文件包含在运行时由servlet填充的这些 ...
Webpack打包图片-JS-Vue文件
打包图片等静态资源资源模块 | webpack 中文文档 (docschina.org) 1.加载图片案例准备为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两 ...
webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
html文件很大,webpack打包之后的文件过大如何解决
本文主要和大家介绍了webpack打包之后的文件过大的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 以前一直使用 create-react- ...
webpack4配置(1)-打包一个js文件
常用指令 npm install == npm i npm install --save == npm i -S npm insall --save-dev == npm i -D 两者的区别:-D只 ...
webpack打包后的文件夹是空的_深入理解 Webpack 打包分块（下）
前言随着前端代码需要处理的业务越来越繁重,我们不得不面临的一个问题是前端的代码体积也变得越来越庞大.这造成无论是在调式还是在上线时都需要花长时间等待编译完成,并且用户也不得不花额外的时间和带宽下载更 ...
JS文件中的敏感信息+swagger接口测试
01 JS中的敏感信息实战中会经常遇到很多js文件,在js文件中很可能会遇到一些敏感信息和路径之类的,遇到路径可以尝试拼接,有可能会遇到未授权的情况等等,也有很多站点是webpack打包,可以F12 ...

webpack打包处理js文件中的高级语法

打包处理js文件中的高级语法

webpack打包处理js文件中的高级语法相关推荐

最新文章

热门文章