webpack babel

最新推荐文章于 2024-07-23 11:32:13 发布
最新推荐文章于 2024-07-23 11:32:13 发布
阅读量129 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43374360/article/details/124863643
版权

index.js文件

// @babel/polyfill会将es6所有的兼容性都引入。但是我们可能只使用某一部分。
// 我们需要按需加载（使用了什么ES6语法，就引入相应的兼容性处理）
// import '@babel/polyfill';

const promise = new Promise((resolve) => setTimeout(resolve, 1000));

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

console.log(promise);
const p = new Person('jack', 18);
console.log(p);

webpack配置

const {
  resolve
} = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: './js/built.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage', // 实现按需加载
                corejs: {
                  version: 3,
                  proposals: true
                },
                targets: { // 兼容到哪些版本的浏览器
                  chrome: "58",
                  ie: "9",
                  firefox: "58"
                }
              }
            ]
          ]
        }
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'production'
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>polyfill</title>
</head>
<body>
  <h1>hello polyfill</h1>
</body>
</html>
rainbowdiary
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack 配置 babel
yleave的博客
01-14 611
文章目录   根据 webpack 版本的不同，安装的 babel 依赖有些区别，下面的是 webpakc 4.2 及以上版本安装的依赖。 4.2 之前的是：babel-core、babel-preset-env   要配置 babel 首先需要安装 @babel/core，这是 babel 的核心编译包： cnpm install --save-dev @babel.core   然后需要安装 babel-loader 来帮助我们加载使用 babel： cnpm i --save-dev babel-lo
详解webpack babel的配置
08-28
Webpack Babel 配置详解 本文将详细地介绍 Webpack 和 Babel 的配置，以便读者更好地理解和掌握这两种技术的配置。 Babel 介绍 Babel 是一个编译 JavaScript 的平台，它的强大之处表现在可以通过编译帮你达到： ...
webpack Babel 浏览器兼容性
weixin_45441173的博客
03-01 648
webpack Babel 浏览器兼容性
webpack与babel
gao_zhennan的博客
10-25 696
webpack
webpack 和 babel 实用教程【前端必备】
朝阳39的博客
03-05 530
开发环境的前端代码重在易于阅读和编写，生产环境的前端代码追求更快地运行，所以需要通过前端构建工具将开发环境的前端代码通过混淆压缩打包构建成生产环境的前端代码。webpack 是众多前端构建工具的一种，主要实现以下功能：压缩代码将JS、CSS代码混淆压缩，让代码体积更小，加载更快编译语法将 Less、Sass、ES6、TypeScript 等浏览器可能不兼容的语法编译成浏览器支持的语法，如使用Babel编译ES6语法。
webpack babel报错问题
Dj_Fairy的博客
11-23 685
解决方法，将module下面的rules下面的loader改成。
webpack及babel配置
qq_39111074的博客
11-17 2350
请先确认自己的电脑已经安装了 node 和 npm，没有安装的请先安装，以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- - -npm init。 使用编辑器打开该文件夹，此处我使用的编辑器为 vscode，再命令行输入命令‘npm init’，会出现一些选项，可以都直接回车，默认设置，全部回车完成后，会生成一个 “package.json” 文件。如下： 如果要更改信息可以直接在改文件中修改 如果希望 “package.jso
webpack babel 配置
exploringfly的博客
07-18 812
1.在webpack.config.js中配置babel： module: { rules: [ { test: /\.(js|jsx)$/, use:{ loader:'babel-loader' } ...
webpack使用babel
Fight1124的博客
12-16 52
然后在webpack.config.js的module.rules中添加rule。最后在根目录下新建一个babel.config.js文件，并在其中添加预设。命令即可在打包的时候将新的语法转换为旧的语法。来安装babel相关插件。
babel+webpack
qq_46068142的博客
01-10 466
babel+webpack一，Babel的简单使用1，简单使用2，转换语法——@babel/preset-env3，转换api——polyfill4，babel版本5，presets\plugins6，babel-polyfill7，presets参数项(1)targets(2)useBuiltIns(3)core.js(4)modules(5)@babel/runtime @babel/plugin-transform-runtime(6)babel工具二，webpack的简单使用1，快速入门2，lo
webpack与babel的总结
weixin_47204963的博客
01-07 639
1.基本配置 https://www.jianshu.com/p/d6eb241b8988 2.高级配置 a配置多入口 https://www.jianshu.com/p/3ae0fc9ac272 b如何抽离压缩css文件 https://www.jianshu.com/p/b8080c7170e6 c抽离公共代码 https://www.jianshu.com/p/ac6f239658ce d如何实现异步加载js（懒加载）处理vue以及处理jsx https://www.jianshu.com/p/b13
phaser-webpack-babel-boilerplate：Phaser Webpack Babel样板
01-30
:rocket: Phaser Webpack Babel样板 Phaser-shim（ ，以便能够将Phaser与Webpack一起使用） Webpack（启用了Webpack开发服务器，热模块更换和错误通知插件以及源映射） Babel（和ES6语法） 基本游戏和状态初始化
react-webpack-babel:React Webpack Babel简单配置教程
04-28
在本文中，我们将深入探讨如何在不使用`create-react-app`的情况下，手动配置一个React项目，结合Webpack和Babel进行构建。这个过程涉及到的主要知识点包括React的基础知识、Webpack的配置原理以及Babel的转译机制。...
React全栈 Redux Flux webpack Babel整合开发
06-04
React全栈 Redux Flux webpack Babel整合开发(React开发入门资料）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 718
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 966
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 773
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 973
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 251
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
webpack babel-loader配置
08-20
对于 webpack 和 babel-loader 的配置，你可以按照以下步骤进行： 1. 安装必要的依赖： ```shell npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev ``` 2. 在项目根目录下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值