webpack使用babel基本配置

最新推荐文章于 2023-03-11 22:11:36 发布
最新推荐文章于 2023-03-11 22:11:36 发布
阅读量383 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welkin_qing/article/details/88086389
版权

文章目录

配置es6使用的babel

1. package.json文件

{
  "name": "webpack_class",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "vue": "^2.4.2"
  }
}

2. 装包

cnpm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime -D

3. 配置webpack

    const htmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path')
    module.exports = {
        entry:{ //main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        //出口
        output:{
            filename:'./build.js', //指定js文件
            path: path.join(__dirname,'dist')          //最好是绝对路径
            //代表当前目录的上一级的dist
        },
        module:{
            //一样的功能rules:   webpack2.x之后新加的
            loaders:[       //require('./a.css||./a.js')
                {test:/\.css$/,
                 loader:'style-loader!css-loader',
                 //顺序是反过来的2!1
                },
                {
                 test:/\.(jpg|svg|png|gif)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                 //顺序是反过来的2!1 
                 //[name].[ext]内置提供的，因为本身是先读这个文件
                 // options:{
                 //    limit:4096,
                 //    name:'[name].[ext]'
                 // }
                },{//处理ES6的js
                    test:/\.js$/,
                    loader:'babel-loader',
                    //排除 node_modules下的所有
                    exclude:/node_modules/,
                    options:{
                        presets:['es2015'],//关键字
                        plugins:['transform-runtime'],//函数
                    }
                }
            ]
        },

        plugins:[
            //插件的执行顺序是依次执行的
            new htmlWebpackPlugin({
                template:'./src/index.html',
                })
                //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        ]



    }

4. 在main.js中引入common.js

//commonjs引入cal对象
// var cal = require('./cal.js');

//es6的模块引入
import cal from './cal.js';

//获取按钮
document.getElementById('btn').onclick = function(){
    var n1 = document.getElementById('n1').value - 0;
    var n2 = document.getElementById('n2').value - 0;
    var sum = cal.add(n1,n2);
    document.getElementById('result').value = sum;
}

5. 在cal.js中导出

var cal = {
    add:function(n1,n2){
        return n1 + n2;
    }
}

//commonjs导出
// module.exports = cal;
// ES6导出
export default cal;

附上index.html文件

<html>
<head>
    <meta charset="UTF-8">
    <title>01_模块化计算机</title>
</head>
<body>
    
    <input type="text" name="" id="n1"> + 
    <input type="text" name="" id="n2"> 
    <button id="btn">=</button>
    <input type="text" name="" id="result">


   
</body>
</html>
Welkin_qing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解webpack babel的配置
08-28
Webpack Babel 配置详解 本文将详细地介绍 Webpack 和 Babel 的配置，以便读者更好地理解和掌握这两种技术的配置。 Babel 介绍 Babel 是一个编译 JavaScript 的平台，它的强大之处表现在可以通过编译帮你达到： ...
在webpack中配置bable
jieyucx的博客
06-12 2921
Babel是一个编译工具**，主要用于在旧浏览器或过时的JavaScript语言版本中转换新的或标准的JavaScript语法和功能。它的主要作用是解决跨浏览器的兼容性问题，让我们能够使用最新的JavaScript特性，而不必担心它们不被支持的浏览器无法使用。具体来说，Babel可以将ES6及以上的代码转换为ES5或更低版本的代码，使得这些新特性也能在较旧的浏览器上运行。同时，Babel也支持一些插件，如TypeScriptFlowReact等，它们可以帮助我们更加高效、舒适地使用这些语言或框架。
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
憧憬个人博客
01-16 892
先简单介绍一下Webpack和BabelWebpackwebpack工作就是打包，只要你安装的插件就可以打包一切，并且会自动解析依赖项，是前端的热门工具。BabelEcmascript的代码一直在更新 但是浏览器的兼容却没有根上，babel就实现了利用服务端node的 导入导出特性，实现了js代码的渐进增强、平稳退化。让我们可以随意使用新语法而不用考虑浏览器的兼容...
Babel配置
徐___L
12-17 4041
Babel是什么 官网：Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。一般都是和webpack配合使用 使用 安装 npm install @babel/core @babel/cli @babel/preset-env -D @babel/core Babel 的核心功能包含在 @babel/core 模块中，所有的转译都将使用本地配置文件。 配置文件 Babel
babel在webpack 中使用和配置
星环
08-18 5436
babel webpack babel 7.4 @babel/core babel-core core-js @babel/plugin-transform-runtime @babel/preset-env babel-loader @babel/runtime-corejs3 在vue中使用babel
编译器Babel的使用
sinat_39598192的博客
03-11 576
是一个能够从终端（命令行）使用的工具，可以直接使用babel cli进行语法转换的任务，也可以使用babel node像node一样去启动一个应用，唯一的区别是babel node在加载js文件前会先按照配置对其进行语法转换。注意：它们的的名称是可以缩写的，如果你发现一个工程中的babel plugin 找不到对应的依赖时，去看看这个plugin的名称是否是被缩写了。官方提供的preset有好几个，但是用得最多的可能是preset-env，这里单拎出来讲一下，如果想查看其他的preset请前往。
webpack使用 babel-loader 转换 ES6代码示例
08-29
webpack使用 babel-loader 转换 ES6代码示例 在本文中，我们将介绍如何使用webpack来转换 ES6代码，并使用 babel-loader 来转换 ES6语法。下面是详细的介绍： 首先，在使用 webpack 之前，我们需要安装相关的依赖...
react-webpack-babel:React Webpack Babel简单配置教程
04-28
在本文中，我们将深入探讨如何在不使用`create-react-app`的情况下，手动配置一个React项目，结合Webpack和Babel进行构建。这个过程涉及到的主要知识点包括React的基础知识、Webpack的配置原理以及Babel的转译机制。...
细说webpack6 Babel的使用详解
10-16
**Webpack 6与Babel的深度解析** 在现代前端开发中，Webpack 6作为一个强大的模块打包工具，允许开发者使用最新的JavaScript语法（ES6+），但并非所有浏览器都完全支持这些新特性。这时，Babel就起到了关键作用。...
package.json配置
weixin_43805439的博客
01-06 4013
package.json 配置
webpack4.x下babel的安装、配置及使用详解
10-17
主要介绍了webpack4.x下babel的安装、配置及使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack及babel配置
qq_39111074的博客
11-17 2345
请先确认自己的电脑已经安装了 node 和 npm，没有安装的请先安装，以下操作需在安装了这两个的基础上操作 webpack配置 1. 创建一个空文件夹 2. 创建 package.json 文件- - -npm init。 使用编辑器打开该文件夹，此处我使用的编辑器为 vscode，再命令行输入命令‘npm init’，会出现一些选项，可以都直接回车，默认设置，全部回车完成后，会生成一个 “package.json” 文件。如下： 如果要更改信息可以直接在改文件中修改 如果希望 “package.jso
关于前端大管家 package.json，你知道多少？
前端小白-Mr鹏帅
11-04 1237
今天来看看前端的大管家package.json文件相关的配置，充分了解这些配置有助于我们提高开发的效率，规范我们的项目。文章内容较多，建议先收藏在学习！ 在每个前端项目中，都有package.json文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json文件是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。package.json作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。 当我们搭建一个新项目时，往往
手把手教你如何配置Babel系列(一)
卡洛背心的博客
07-21 2450
目标 本文的目的是帮助对Babel不熟悉的人了解 如何书写Babel的配置文件，设计一个“最完美”的 Polyfill 方案 由于内容比较多，我会把下面的目录中的内容分成四个章节去讲解 第一章节 什么是Babel 插件和预设 配置文件 简单Demo演示 第二章节 什么是core-js？ 第三章节 什么是Polyfill？ @babel/polyfill介绍 @babel/preset-env实战 第四个章节 @babel/runtime实战 @babel/plugin-transform-r.
webpack5 基础配置 （6）深入解析Babel以及在webpack的使用
lin_fightin的博客
03-29 2300
上一章说到了babel-cli来帮助我们编译文件，但是真实开发中都是通过webapck配置，一次性全部打包完成的。 但我们现在没有配置webpack的基础下来Build一下。 可以看到bundle.js文件中，webpack只是帮我们实现了一个函数作用域，而没有转换es6的代码。 如果想转成es5，就要通过配置了。 babel是一个工具，功能很少，但能通过插件如@babel/preset-env来壮大其功能。如果只有一个babel-loader时，是不能正确转化es5的。必须借助插件。 使用了@babel
webpack4.x下babel的安装、配置及使用
热门推荐
u012443286的博客
10-13 2万+
前言 　　目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。那么在webpack中如何使用babel呢？这是本篇文章要探讨的问题。 　　写这篇文章的目的还在于最新webp...
webpack中babel配置教程
X01动力装甲的专栏
09-01 2309
随着ES6和TS的的盛行，webpack和babel在项目开发中的作用也日渐显现。所以作为前端开发者，很有必要掌握这些开发工具。 在《webpack入门使用教程》中我们学习了如何配置webpack。 在《ES6开发环境搭建之babel》中我们学习了如何配置babel。 现在我们需要把两者结合起来使用。 1 安装babel 上一篇在配置babel的文章中我已经安装l了babel-cli/b...
babel的安装用法
10 种最常见的 Javascript 错误
03-02 6344
首先在项目的目录中生成package.json文件    npm init --y注意项目目录中不能含有中文名。  --y是生成默认值的package.json，不用的话，在生成过程中会有一大堆问题，我们依次填入就好。安装babel-cli用于命令行转码npm install -g babel-clibabel-cli 需要全局安装 -g代表 -global。需要在项目中也安装babel-clin...
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、付费专栏及课程。

余额充值