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. css3背景色渐变

    <style> .test { width: 200px; height: 200px; background: -moz-linear-gradient(top, #8fa1ff, #3 ...

  2. marathon参考(11):ports端口设置(转)

    Ports marathon中应用的端口配置可能被混淆,并有一个悬而未决的问题,需要重新设计 ports API.这个页面试图更清楚地解释它们是如何工作的. 定义 containerPort:在容器内 ...

  3. kernel 模块与简单 hello 模块

    Kernel 模块与简单 hello 模块 kernel 模块的简介 Linux 内核进行扩展时,例如编写驱动程序.netfilter功能等,最方便的方式是通过编写模块,然后加载到内核中.由于 ker ...

  4. OC面向对象—多态

    OC面向对象—多态 一.基本概念 多态是基于继承的基础之上的,多态可以使得父类的指针指向子类的对象.如果函数或参数中使用的是父类类型,可以传入父类.子类对象,但是父类类型的变量不能直接调用子类特有的方 ...

  5. 第八篇 SQL Server代理使用外部程序

    本篇文章是SQL Server代理系列的第八篇,详细内容请参考原文 在这一系列的上一篇,学习了如何用SQL Server代理作业活动监视器监控作业活动和查看作业历史记录.在实时监控和管理SQL Ser ...

  6. MvvmLight 绑定

    添加MvvmLight引用,通过Nuget: 加载nuget以后会有ViewModelLocator.cs: 新建自己的ViewModel,继承ViewModelBase: View 通过资源引用Vi ...

  7. Fluentd安装——通过rpm方式

    0. td-agent是何物 为了灵活性,fluentd用Ruby写的,其中一些性能敏感的部件使用c写的.普通的用户直接安装和使用Ruby进程可能有困难,这样就把它封装成Fluentd的稳定版本——t ...

  8. cacti批量添加主机脚本

    #!/bin/bash ##cacti批量脚本位置 device=/var/www/html/cacti/cli/add_device.php graphs=/var/www/html/cacti/c ...

  9. Oracle Hang Manager

    名词术语1.Cross Boundary Hang 交叉边界hang.在12.1.0.1中,hang manager可以检测database和asm之间的hang.2.Deadlock or Clos ...

  10. Wcf Restful Service服务搭建

    目的 使用Wcf(C#)搭建一个Restful Service 背景 最近接到一个项目,客户要求使用Restful 方式接收到数据,并对数据提供对数据的统计显示功能,简单是简单,但必须要使用Restf ...