webpack不仅可以解析jsx,也可以将es6转换为es5语法。
最终,它把这些代码都打包成一个叫bundle.js的文件,我们在html文件中只引入这么一个js文件就可以了!

打包后,引用的语法
import “./button.css”

1.安装webpack

npm install webpack -g (全局)
npm install webpack --save--dev (本地)

2.webpack的辅助文件

npm install babel-core
npm install babel-loader
npm install babel-preset-es2015 (解析es6)
npm install babel-preset-react (解析jsx语法)
npm install react (jsx语法支持)
npm install react-dom (jsx语法支持)

注意:webpack需要先安装node.js

项目中使用webpack
用npm增加一个package.json配置文件
$ npm init
安装webpack插件并将webpack配置到package.json文件中
$ npm install webpack --save-dev

webpack笔记_(1)_webpack 安装的更多相关文章

  1. webpack笔记_(3)_First_Project

    知道了怎么样安装,那么学习一下简单的应用吧. 1.安装webpack npm install webpack -g (全局) npm install webpack --save--dev (本地) ...

  2. webpack笔记_(2)_Refusing to install webpack as a dependency of itself

    安装webpack时,出现以下问题: Refusing to install webpack as a dependency of itself npm ERR! Windows_NT npm ERR ...

  3. webpack笔记三 管理输出

    webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...

  4. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  5. webpack笔记一 起步

    webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...

  6. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  7. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制

    在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...

  8. 在把webpack作为本地开发依赖安装的时候报错

    在把webpack作为本地开发依赖安装的时候报错 Refusing to install webpack as a dependency of itself 原因是package.json里的name ...

  9. React笔记_(3)_react语法2

    React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...

随机推荐

  1. Web:AJAX的详解

    Web中的AJAX技术: 1.介绍:全称:Asnchronous JavaScript and XML,即异步的JavaScript和XML功能:它不是某种编程语言,是一种无需加载整个网页的情况下能够 ...

  2. winston日志管理2

    上次讲到 Exceptions  例外 Handling Uncaught Exceptions with winston 使用winston处理未捕获的异常(这个如果对于异步,我不是很喜欢用) 使用 ...

  3. eclipse报jvm terminated.exitcode=2异常解决办法

    由于安转了oracle,而oracle又自带了jdk,版本好像是1.1的,冲突了.具体可以查看path值.解决方法:删掉oracle的,或者是将oralce的path配置项移到java的配置项后面,建 ...

  4. 注意SQLServer2012中带参数的XP_ReadErrorLog

    --15:26 2014-6-10数据库错误日志通知其中有一部分是检测ERRORLOG中若有用户登录失败信息时,会记录到Errorlog表,并邮件提醒.当时直接从同事那拿过来的脚本(08),按理说版本 ...

  5. celery 入门

    认识 这里有几个概念,task.worker.broker.顾名思义,task 就是老板交给你的各种任务,worker 就是你手下干活的人员. 那什么是 Broker 呢? 老板给你下发任务时,你需要 ...

  6. javascript实例学习之四——javascript分页

    话不多少,直接上代码 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. swap文件

    # dd if=/dev/zero of=/tmp/myswap bs=1M count=4096 # mkswap /tmp/myswap # swapon /tmp/myswap # vim /e ...

  8. SQL Server 身份验证 登陆

    当遇到错误 检查SQL是否启动 SQL Server (MSSQLSERVER)在 打开 SQL Server 配置管理器 SQL Server (MSSQLSERVER) 鼠标右键->启动 再 ...

  9. HUD 5086 Revenge of Segment Tree(递推)

    http://acm.hdu.edu.cn/showproblem.php?pid=5086 题目大意: 给定一个序列,求这个序列的子序列的和,再求所有子序列总和,这些子序列是连续的.去题目给的第二组 ...

  10. Codeforce Round #219 Div2

    妈蛋,C题又没搞出来! 看上去很简单的一题 到是这次的题目意思都比较容易懂,C没弄出来时,回去看了下A,以为来不及了,没想到这次的手速还是可以的7分钟搞出来了,因为太简单- -! A:大于两倍的不行- ...