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

前言

在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高级语法打印到控制台了