webpack笔记_(3)_First_Project
知道了怎么样安装，那么学习一下简单的应用吧。
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语法支持）
3.新建src和dest，分别放源文件和打包后的文件。
4.新建webpack.config.js的文件
module.exports = {
entry: './entry.js', //入口
output: { //输出
path: __dirname,
filename: "./dest/bundle.js"
},
module: {
loaders: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { compact: false, presets: ['es2015', 'react'] }
}]
}
};
5.创建测试文件
在src源文件夹里面创建index.html文件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第一个react的例子</title>
</head>
<body>
<div id="app"></div> </body>
</html>
<script src="./dest/bundle.js">
</script>
6.创建一个测试helloworld.js文件,这个文件我们用jsx和es6语法写。
'
'use strict';
//引入相关的包
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
//es6语法
class HelloWorld extends Component {
render() {
return ( <h1> hello, world </h1>)
}
}
//渲染虚拟dom
ReactDOM.render( <
HelloWorld / > ,
document.getElementById('app')
);
7.完成后，我们跳出src目录，创建一个入口文件entry.js
require('../src/helloworld.js');
最终的文件目录结构：
8.运行
webpack，回车，过一会看到编译完成后，在dest文件夹下会多一个bundle.js文件，
然后进入src目录，双击index.html文件
源码及说明点此下载
或者访问：https://github.com/ZhangWeiStudy/React_Note/tree/master/WebReact/webpack_react
webpack笔记_(3)_First_Project的更多相关文章
- 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 ...
- webpack笔记_(1)_webpack 安装
webpack不仅可以解析jsx,也可以将es6转换为es5语法.最终,它把这些代码都打包成一个叫bundle.js的文件,我们在html文件中只引入这么一个js文件就可以了! 打包后,引用的语法im ...
- webpack笔记三 管理输出
webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...
- webpack笔记二 管理资源
webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...
- webpack笔记一 起步
webpack笔记一 起步 安装 对于大多数项目,我们建议本地安装(--save-dev).这可以在引入突破式变更(breaking change)版本时,更容易分别升级项目. 起步 初始化项目 mk ...
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制
在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
随机推荐
- 读取XML文档结构并写入内容
1.在项目中新建XML文档结构.xsd文件,在其中添加相应的节点. 2.读取文档结构并写入内容 string initFileName = @"D:\Config.xml"; Da ...
- 零售业数据分析的媒介——BI工具
当你需要从一堆复杂庞大的数据中分析出有用的信息和结论的时,想必你一定觉得力不从心:数据的冗余使得你分析起来困难重重,怎么办呢?今天我们就来讲一下使数据分析变得简单有效的“手段”. 对于当今的中国零售行 ...
- 第六篇 Replication：合并复制-发布
本篇文章是SQL Server Replication系列的第六篇,详细内容请参考原文. 合并复制,类似于事务复制,包括一个发布服务器,一个分发服务器和一个或多个订阅服务器.每一个发布服务器上可以定义 ...
- 计算NSString含有多少个相同字符串
// // NSString+NSStringExt.m // 01-NSString类 // // Created by apple on 14-3-20. // Copyright (c) ...
- Using RestTemplate, how to send the request to a proxy first so I can use my junits with JMeter?
org.springframework.http.client.SimpleClientHttpRequestFactory java.net.Proxy java.net.Proxy.Type ja ...
- 多配置文件部署mysql单机多实例
1.安装gcc-c++.ncurses依赖包 # yum install gcc-c++ ncurses-devel 2.安装cmake,用来编译mysql # tar -xvf cmake-3.2. ...
- ARM 嵌入式中断
1. SATA中断要打开,挂在fiq上(通过cpu中断的fiq中断enable位,对sata中断使能), 2.外设及GPIO中断打开,挂在irq上(通过cpu中断的irq 的enable位对其使能), ...
- Java基础之读文件——使用输入流读取二进制文件（StreamInputFromFile）
控制台程序,读取Java基础之读文件部分(StreamOutputToFile)写入的50个fibonacci数字. import java.nio.file.*; import java.nio.* ...
- 《30天自制操作系统》02_day_学习笔记
helloos3: helloos.nas的解释在P29中 接下来课本讲了一些汇编语言的知识,便于理解这个汇编文件helloos4: 讲解在P41 helloos.nas后半部分去掉就成了ipl.as ...
- Swift实战-豆瓣电台（四）歌曲列表的展现
观看地址 http://v.youku.com/v_show/id_XNzMwNDE0OTA4.html 这节的主要内容是如何利用cell展现获取到的数据. 首先申明两个数组来储存我们获取到的数据 v ...