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. Ext中解析字符串

    Ext.encode()将json转为json字符串Ext.decode()将json字符串转为json

  2. java实现读取文件内容(不同类型)

    在一些项目中大量的数据经常需要从文件中读取,例如xml文件,txt文件,csv文件 1.读取本地的xml文件,需要注意对应的路径 //读取xml文件,xmlFile为读取文件的路径 DocumentB ...

  3. objective-c 中随机数的用法 3种:arc4random() 、random()、CCRANDOM_0_1()

    oc 中随机数的用法(arc4random() .random().CCRANDOM_0_1() 1).arc4random() 比较精确不需要生成随即种子 使用方法 : 通过arc4random() ...

  4. gcc工具链简述

    工具链软件包括BINUTILS.GCC.GLIBC.GDB等. BINUTILS是二进制程序处理工具,包括链接器.汇编器等目标程序处理的工具. GCC(GNU Compiler Collection) ...

  5. SUSE Linux 防火墙设置

    1.vim /etc/sysconfig/SuSEfirewall2        #编辑防火墙设置 FW_SERVICES_EXT_TCP="22 5901"       #开启 ...

  6. MS SQL 多连接数时修改数据库名称

    在MS SQL中,如果你想修改某一个数据库的名称,你可以通过下面几种方法实现. 方法一:使用SP_RENAMEDB系统存储过程实现. 语法: sp_renamedb [ @dbname = ] 'ol ...

  7. HTTP报文

    HTTP报文分为请求报文(request message)与响应报文(response message). 一.报文的组成部分 一个HTTP报文由3部分组成,分别是: (1).起始行(start li ...

  8. IntelliJ IDEA 常用设置讲解2

    IntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它. 常用设置 如上图 Gif 所示, ...

  9. fzu 2188 过河I

    http://acm.fzu.edu.cn/problem.php?pid=2188 过河I Time Limit:3000MS     Memory Limit:32768KB     64bit ...

  10. 算法训练 Anagrams问题

    http://lx.lanqiao.org/problem.page?gpid=T223 算法训练 Anagrams问题   时间限制:1.0s   内存限制:512.0MB      问题描述 An ...