webpack学习笔记五

Babel是几个模块化的包，核心功能位于成为babel-core的npm的包中，不过webpack把他们整合在一起使用，但是对于每一个你需要的功能和拓展，你都需要安装单独的包（用得最多的是解析ES6语法的babel-preset-es2015包和解析JSX的babel-preset-react包）

安装命令：npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

然后在webpack.config.js的配置项里写入：

{

test:/\.js$/,

exclude:/node_modules/,

loader:‘babel‘,//在webpack的module部分的loaders里进行配置即可

query:{

presets:[‘es2015‘,‘react‘]

}

｝

再在work.js里添加ES6语法

首先注销掉配置项试试

然后看一下编译完成npm start后的webpack.js里的语法有无转换：

可以看到，没有转换

用chrome浏览器打开index.html，依旧可以弹出7,因为最新的谷歌浏览器都支持了ES6大部分语法

然后取消webpack.config.js里的注释

再次运行命令:npm start

然后看一看编译完成的webpack.js的里的关于这段代码的语法是否有变化

果然变成了我们熟知的语法。

再打开index.html,依旧弹出7

也可以安装React ，命令是npm install --save react react-dom

时间： 2024-12-25 12:45:43

webpack学习笔记五的相关文章

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn

Caliburn.Micro学习笔记(五)----协同IResult

Caliburn.Micro学习笔记(五)----协同IResult 今天说一下协同IResult 看一下IResult接口 /// <summary> /// Allows custom code to execute after the return of a action. /// </summary> public interface IResult { /// <summary> /// Executes the result using the specif

angular学习笔记(五)-阶乘计算实例(1)

<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </

webpack学习笔记八

webpack自动刷新浏览器 webpack开发服务器,是webpack官方提供的一个辅助开发工具,它可以自动监控项目下的文件,一旦有修改保存的操作,它就会自动执行打包命令,将我们的代码重新打包,并且需要的话还可以刷新浏览器. 首先我们安装webpack-dev-server 在CMD中安装执行npm intall webpack-dev-server -g 在项目目录执行安装依赖命令: npm install --save-dev webpack-dev-server 其中webpack-de

NLTK学习笔记(五):分类和标注词汇

[TOC] 词性标注器之后的很多工作都需要标注完的词汇.nltk自带英文标注器pos_tag import nltk text = nltk.word_tokenize("And now for something compleyely difference") print(text) print(nltk.pos_tag(text)) 标注语料库表示已经标注的标识符:nltk.tag.str2tuple('word/类型') text = "The/AT grand/J

webpack学习笔记

webpack笔记 webpack学习笔记 1.全局安装 npm install webpack -g 2.作为项目依赖安装 npm install webpack --save-dev 3.安装css-loader.sass-loader.node-scss npm install css-loader sass-loader node-scss --save-dev 4.webpack配置 // webpack.config.js var path = require('path'); mo

Linux System Programming 学习笔记(五) 进程管理

1. 进程是unix系统中两个最重要的基础抽象之一(另一个是文件) A process is a running program A thread is the unit of activity inside of a process the virtualization of memory is associated with the process, the threads all share the same memory address space 2. pid The idle pro

java之jvm学习笔记五(实践写自己的类装载器)

java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类装载器和安全管理器是可以被动态扩展的,或者说,他们是可以由用户自己定制的,今天我们就是动手试试,怎么做这部分的实践,当然,在阅读本篇之前,至少要阅读过笔记三. 下面我们先来动态扩展一个类装载器,当然这只是一个比较小的demo,旨在让大家有个比较形象的概念. 第一步,首先定义自己的类装载器,从Clas

WEB前端学习笔记五

接web前端学习笔记第四篇,此篇为web学习笔记五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3 html标签的属性格式现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意