一个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 ...
随机推荐
- 第三方支付过程中session失效问题
第三方支付过程中session失效问题 时间 2015-05-13 12:36:23 IT社区推荐资讯 原文 http://itindex.net/detail/53436-session-问题 ...
- phpcms v9的url优化
nginx配置重定向 # nginx rewrite rule rewrite ^/show-(.+)-(.+)-(.+).html$ /index.php?m=content&c=index ...
- DevExpress中的ASPxTreeView 递归显示checknodes并获得选中值
aspx代码 <dx:ASPxTreeView ID="ASPxTreeView1" runat="server"> </dx:ASPxTre ...
- rabbitmq redis
RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统. 对于RabbitMQ来说,生产和消费不再针对内存里的一个Queue对象,而是某台服务器上的RabbitMQ Se ...
- wampserver---------如何让局域网其他电脑访问我的apache
wamp版本:wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 修改方式,看图:修改完记得重启.
- webApp 开发技术要点总结
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webapp的开发已经有一段时间了,现把一些技巧分享给大家 ...
- ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
- 左 or 右
背景: 掌握的知识:C++.MFC.设计模式.STL,熟悉windows网络编程,了解COM组件但是不精. 近期辞职找工作,发现windows下的C++开发职位很少.linux和移动端开发职位多,但是 ...
- servlet1
1.jsp其实就是servlet 2.一个java类实现servlet接口,然后在浏览器端访问即可
- Orchard part8
http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-part-8 定 ...