一个webpack，react，less，es6的DEMO
1.package.json如下
{
"name": "demo",
"version": "1.0.0",
"description": "一个简单的示例",
"main": "index.js",
"dependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"style-loader": "^0.13.0",
"css-loader": "^0.23.0",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"react": ">=0.14.2",
"react-dom": ">=0.14.2"
},
"author": "sam wu",
"license": "ISC"
}
为什么不用babel6.2呢？原因是它插件机制虽好，但是打包太慢了。
所以用回babel5.8，速度可以。
关于^符号就不说了吧。
^1.2.3 >=1.2.3 < 2.0.0
^0.2.3 >=0.2.3 < 0.3.0
^0.0.3 >=0.0.3 < 0.0.4
^1.2.3-beta.2 >=1.2.3-beta.2 < 2.0.0
webpack-dev-server 1.11版本有路径超长问题，超过windows的256字符限制。无法使用，无法删除。
用cygwin32，rm-rf命令删除吧。
2.webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
"./index.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js$/, loaders: ["babel"], exclude: /node_modules/ },
{
test: /\.less$/,
loader: "style!css!less"
}
]
}
};
less-loader还得依赖css-loader，css-loader还得依赖style-loader。
exclude嘛，就是忽略这个目录打包。
3.index.js
import './index.less';
let React = require('react');
let ReactDOM = require('react-dom');
let World = React.createClass({
render(){
return (
<span>World is beautiful!Yes...!</span>
)
}
})
let Hello = React.createClass({
render(){
return(
<div>
<h1>Hello,boy!</h1>
<World />
</div>
)
}
})
ReactDOM.render(
<Hello />,
document.getElementById("test")
);
4.index.less
body{
#test{
width: 300px;
height: 200px;
border: 1px solid #ddd;
color: blue;
}
}
5.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello boy</title>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="./build/bundle.js"></script>
</html>
6.执行打包
webpack -w
监听文件变化，实时打包
webpack -d
提供SourceMaps，方便调试
一个webpack，react，less，es6的DEMO的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- 使用 webpack + react + redux + es6 开发组件化前端项目
因为最近在工作中尝试了 webpack.react.redux.es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化.对应的项目地址:webpack- ...
- 手动搭建一个webpack+react笔记
{ "name": "lottery", "version": "1.0.0", "description&q ...
- 如何从零搭建一个webpack+react+redux+react-redux的开发环境一入门
阅读本文章的时候,你要有一定的基础知识储备,简单的es6知识,模块化思想知识,js基础知识,node基础知识,react等 首先执行npm init,此时我的文件叫case; 下面安装一些需要的npm ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- 搭建 webpack + react 框架爬坑之路
由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
随机推荐
- GDC2016 [全境封锁]，11个种类5个派系的敌人设计思路
[汤姆克兰西:全境封锁],11个种类5个派系的敌人设计思路 实现[汤姆克兰西]射击RPG的AI开发 日文链接:http://game.watch.impress.co.jp/docs/news/2 ...
- 阿里云专有网络与弹性公网IP
阿里云服务器经典网络和专有网络究竟有什么区别? 在用户提交订单购买阿里云ECS云服务器时,会面临怎样选择网络类型的烦恼,阿里云服务器定制购买时,网络类型里的经典网络和专有网络(VPC)是什么含义,该怎 ...
- 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析
使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...
- find 找出大文件
找到大文件 find . -type f -size +100M -exec du -smh {} \;
- ios数据库SQLite实现
SQLite嵌入式数据库 1.支持时间,不需要配置,不需要安装,不需要管理员; 2.支持大部分SQL92; 3.完整的数据库保存在磁盘上面的一个文件,同一个数据库文件可以在不同机器上面使用.最大支持数 ...
- Python学习【第二篇】Python入门
Python入门 Hello World程序 在linux下创建一个叫hello.py,并输入 print("Hello World!") 然后执行命令:python hello. ...
- Python开发【第四章】：Python函数剖析
一.Python函数剖析 1.函数的调用顺序 #!/usr/bin/env python # -*- coding:utf-8 -*- #-Author-Lian #函数错误的调用方式 def fun ...
- DNS协议
DNS Message: Header 消息头部 Question DNS请求 Answer 回答请求的资源记录(Resource Record(s)) Authority 指向域的资 ...
- c#：排序
http://www.cnblogs.com/end/archive/2011/10/22/2220940.html 选择排序 冒泡排序 快速排序 插入排序 希尔排序 归并排序 基数排序 计数排序 小 ...
- Java －－ 在Eclipse上使用Hibernate
最近一个项目要用Java做,一点都不熟啊.没办法,只好硬着头皮啃了,花了大半天的时间,终于在Eclipse上完成了第一个Hibernate例子.下面记录关键的步骤,权作笔记,以备日后查看. (1)下载 ...