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. Oracle利用external table 查看trace文件

    1. 用下面的语句找到trace文件的路径 select * from v$diag_info where name='Default Trace File'; 2. 创建一个directory用来加 ...

  2. day04-java-循环结构(while、do-while、for)

    循环结构(while.do-while.for) 任何复杂的程序逻辑都可以通过三种结构来实现:1)顺序结构:从上往下逐行执行,每句必走2)分支结构:有条件的执行某语句一次,并非每句必走3)循环结构:有 ...

  3. each的详解

    首先我还是先观察w3c讲解: 先写一段代码,如图: 定义:each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环.(我在代码中加了return false,发 ...

  4. Android图片压缩方法总结

    本文总结Android应用开发中三种常见的图片压缩方法,分别是:质量压缩法.比例压缩法(根据路径获取图片并压缩)和比例压缩法(根据Bitmap图片压缩).   第一:质量压缩方法:   ? 1 2 3 ...

  5. 内存映射文件mmap

    1.  mmap mmap可以把磁盘文件的一部分直接映射到内存,这样文件中的位置直接就有对应的内存地址,对文件的读写可以直接用指针而不需要read/write函数.使用内存映像文件的另一个优点是可以共 ...

  6. oracle恢复备份数据

    sqlplus链接数据库: 1.sqlplus 用户名/密码@IP地址/数据库名称 2.sqlplus 用户名/密码@数据库名称 注:第二种方法要在tnsnames.oRA文件中配置数据库名称 链接断 ...

  7. 解决: libcimtd.lib not found, rpcndr.lib not found

    在编译Inside COM这本书的代码的时候. 报这个错. 毕竟1996年的代码... 原因很简单: libcimtd.lib 是 VC6时代的东西(对应着iostream.h)...现在的MS编译器 ...

  8. status 状态栏

    http://www.pchou.info/ios/2015/08/22/oc-statusbar.html IOS的项目多数会遇到控制状态栏和导航栏的问题,比如隐藏状态栏.控制状态栏的文字颜色等,导 ...

  9. js 点击展开、收起

    //点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...

  10. Debug 介绍

    Debug 设置