babel 7.x 结合 webpack 4.x 配置

今天在学习webpack的使用的时候,由于学习的教程是2018年初的,使用的是 webpack 3.x 和 babel 6.x ,然后学习的过程中出现的了很多问题。

解决问题之后,总结一下新的 babel 7.x 结合 webpack 4.x 配置 的正确方法

参考了官方文档:https://www.babeljs.cn/docs/setup/#installation

参考资料 升级指南 Upgrade to Babel 7

安装包

写 .babelrc 配置文件

配置 webpack 文件

总结:

babel舍弃了以前的 babel-- 的命名方式,改成了@babel/-

stage-× 已经被弃用,要把babel-preset-stage-0 卸载,然后修改.babelrc文件

原文地址:https://www.cnblogs.com/amcy/p/10273929.html

时间: 2024-11-01 21:50:00

babel 7.x 结合 webpack 4.x 配置的相关文章

babel 7.x 和 webpack 4.x 配置vue项目

很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了.看来每日沉迷项目,已经跟不上节奏了.这里记录一下遇到的问题以及解决方案. 1.webpack 4.x 插件 extract-text-webpack-plugin (node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use ne

webpack的简单配置

本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一个webpack.config的js文件. 2.配置文件创建好了,我们就开始正式配置webpack了. 1.我们要安装nodejs,应为webpack基于nodejs,nodejs可以点击这里下载: 2.安装完nodejs之后,我们打开命令窗口,找到你的项目文件,在项目文件webpack.confi

webpack + vuejs 基本配置(一)

开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5.ES6语法 另外,这套教程的代码都在我的github上,读者可以对照着代码来看,不过还是希望大家自己亲手搭建,体验这个过程,git地址: git地址 前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会

webpack超详细配置, 使用教程(图文)

webpack超详细配置, 使用教程(图文) 版权声明:本文为博主原创文章,未经博主允许不得转载. 博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm insta

react+webpack基础学习配置

最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目,过程还算顺利.总结一下步骤: 1.创建一个项目文件夹Blog,cd进入文件夹目录,输入 npm init -y 生成package.json文件: 2.工程目录创建,如下如是我的工程目录 public是webpack打包后生成的文件夹,src是逻辑组件文件夹,assets是静态文件 webpack

webpack window下配置的hello world

峰回路转 一区九折 先看效果:(此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果) 安装 先装好node和npm,因为webpack是一个基于node的项目.然后 npm install -g webpack 总览 官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种文件打包成一系列的静态资源. 请看下图 webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的

webpack 多entry 配置

// webpack 多entry 配置var path = require('path'); module.exports = { entry: { entry2: './entry.js', demo2: './demo.js' }, output: { path: __dirname, filename: '[name].js' } };

Angular-cli 1.6.7 构建应用关于webpack的一些配置

Angular-cli 1.6.7 构建应用 webpack的一些配置 使用ng new my-app初始化的项目并不包含webpack配置文件,需要ng eject命令来加入webpack.config.js配置文件. 此时这个文件里已经有了较为完善的配置.但是还缺少一些其它的需求. 1. uglifyjs-webpack-plugin js压缩插件 将js文件压缩,减小打包后文件的体积. const UglifyJsPlugin = require('uglifyjs-webpack-plu

webpack 4+ vue-loader 配置

webpack 4+ vue-loader 配置 写的demo,clone下来后,npm dev即可, 可能会由于版本问题,配置会有些许改动,暂时都是可用的 具体配置文件在webpack.config.js 配置步骤的话可以查看webpack官方文档指南,非常详细 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 const CleanWebpackPlugin = require('clean-webpack-plugi