一个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 ...
随机推荐
- 【应用笔记】【AN004】VB环境下基于RS-485的4-20mA电流采集
版本:第一版作者:周新稳 杨帅 日期:20160226 =========================== 本资料高清PDF 下载: http://pan.baidu.com/s/1c1uuhLQ ...
- log4j.properties 配置的学习整理
参考资料: log4j.properties:用来做什么的(日志) Log4j:由2部分组成 :loggers(记录器) ----日志的类别 appender(输出源) ...
- KMP快速字符串匹配
KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt同时发现.KMP算法的关键是利用匹配失败后的信息,从错误中吸取经验,尽量减少模式串与主串的匹配次数以 ...
- AFNetworking 3.0 版本使用
原创:http://www.zhimengzhe.com/IOSkaifa/38653.html AFNetworking 3.0 版本使用 在Xcode7.0之后,苹果废弃了NSURLConnect ...
- 如何用ajax提交多组同样的数据（数组）到后台？
我在AJAX中这样写 $("#subbutton").click(function(){ var machineCode_1=$("#machineCo ...
- Metro 页面间跳转报错、打包和安装一个本地的Metro类型应用
1.模板页面间传值跳转报错误 参照:http://www.cnblogs.com/dagehaoshuang/archive/2012/08/31/2665166.html#2862480 强烈推荐, ...
- VMware workstaion上传虚拟机到VMware EXSI 5.5
1.首先在VMware Workstation 文件 --- 连接VMware EXSI5.5服务器. 2.输入VMware EXSI 5.5服务器地址.用户名和密码. 3.右键Windows 7 ...
- git如何使用 svn如何使用
git和svn是2款常用的版本控制系统. git 的功能: 1.从服务器上克隆完整的Git仓库(包括代码和版本信息)到单机上. 也就是说自己机器上有一个git仓库. 这和svn是不同的,svn是没有本 ...
- network config
ifcfg-ens32 --static TYPE=Ethernet BOOTPROTO=static DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes ...
- PHP之十六个魔术方法详解
https://segmentfault.com/a/1190000007250604#articleHeader14