一个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 ...
随机推荐
- Fail to start neutron-server
问题: [root@localhost ~]# systemctl status neutron-server ● neutron-server.service - OpenStack Neutron ...
- 使用 Git@OSC 管理代码
开源中国的 git 服务的地址是:http://git.oschina.net/ 以下记录 push 本地已有的项目至 git@osc 的过程. ① 注册登录之后,创建一个自己的项目: 创建好的默认项 ...
- GDC2016 [全境封锁]，11个种类5个派系的敌人设计思路
[汤姆克兰西:全境封锁],11个种类5个派系的敌人设计思路 实现[汤姆克兰西]射击RPG的AI开发 日文链接:http://game.watch.impress.co.jp/docs/news/2 ...
- php如何遍历多维的stdClass Object 对象，php的转换成数组的函数只能转换外面一丛数组
php如何遍历多维的stdClass Object 对象,php的转换成数组的函数只能转换外面一丛数组 (2012-09-10 19:58:49) 标签: 杂谈 分类: 网页基础知识 php如何遍历多 ...
- C#的TreeView标记
今天用到了TreeView控件,多次添加后发现内容是重复的,于是用到清除:this.myTreeView.Nodes.Clear(): 如果想在添加完节点后,默认全展开:this.myTreeView ...
- python中raw_input输入数字问题
如果按照下面方式,则无论你输入什么,都会打印12,因为raw_input接受的输入是按照字符串处理的 num = raw_input('please enter a num:') if num > ...
- Android 高德地图No implementation found for long com.autonavi.amap.mapcore.MapCore
此篇博客最后更新时间写自2016.5.18.当下高德地图jar版本为3.3.1. 使用高德地图碰到此问题,纠结许久(接近4个多小时). 记录在此,希望遇到相同问题的读者可以有所借鉴. 错误截图: 导致 ...
- Linux解决Device eth0 does not seem to be present
ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting down loopback insterface: ...
- 手动启动mongodb和nodejs程序
最近做单片机去了,以前用的mongodb和nodejs没有配置成服务,居然忘了如何手动启动.在此记录下 一.手动启动mongodb 1.进入cmd 2.在dos下打开mongodb路径E:\mongo ...
- request.get request.GET……
发现他们是不同的. 报错: AttributeError at /add/ 'WSGIRequest' object has no attribute 'get' Request Method: GE ...