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. Group的操作

    1. 概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组 示例 2. group by的简单操作 3. Group By中Select指定的字段限制 select指定的 ...

  2. linux 挂载命令详解

    挂载文件系统与卸载文件系统 mount / umount NO1. 挂载光驱 [root@rehat root]# mount -t iso9660 /dev/cdrom /mnt/cdrom NO2 ...

  3. [OpenCV](1)安装与测试

    1.安装包下载地址:http://opencv.org/downloads.html 2.解压缩到D:\Program Files (x86) 3.添加环境变量:D:\Program Files (x ...

  4. Vue.2.0.5-单文件组件

    介绍 在很多Vue项目中,我们使用 Vue.component 来定义全局组件,紧接着用new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方案在只是使用 ...

  5. Apache, Nginx获得nginx代理后的真实用户Ip

    Nginx 的反向代理设置  proxy_set_header X-Real-IP $remote_addr; apache可以设置日志格式将 %h替换为 %{X-Real-Ip}i 如: LogFo ...

  6. button点击传多个参数

    // --------------------button点击传多个参数------------------------ UIButton *btn = [UIButton buttonWithTyp ...

  7. DataGridView的单元格控制只能输入数字

    主要是应用DataGridView的EditingControlShowing事件.当单元格进入编辑模式时,可以处理执行该编辑控件的自定义初始化的此事件. public DataGridViewTex ...

  8. First learning operation system

    1,操作系统负责管理硬件资源,为应用程序的开发执行提供基础 2,用户空间包括应用程序,只能通过调用系统调用访问硬件,无法访问更小粒度功能 3,设备驱动程序函数和内核子系统的函数对用户不可见 4,操作系 ...

  9. Undefined symbols “_OBJC_CLASS_$_XXX” 问题

    解决方法是点击工程,在targets界面中找到Build Phases,根据提示信息“XXX”来判断缺少什么文件,一般如果缺少自定义的文件,XXX会是缺少的类名,那么就在Complie Sources ...

  10. 无向连通图求割边+缩点+LCA

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7082   Accepted: 2555 Descripti ...