一个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开发模式---续
一.前言之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
从零开始一个webpack+react项目
从零开始一个webpack+react项目最近在做react组件化的分享,从项目中抽离组件,那么第一步自然是搭建相关的环境本篇旨在从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的w ...
webpack+react+es6开发模式
一.前言实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
webpack + react 使用 eslint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误. 在本文开始前, 我们假设您已经有一个webpack + reac ...
如何使用webpack+react+redux从头搭建Todolist应用
webpack环境配置应用整体框架设计代码实现 Container Components Actions Reducers indexjs 测试总结一言不和先上demo: https://ms ...
webpack+react多页面开发架构
项目已经升级为最新版本参考react-multi-page-app webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包 ...
React与ES6（一）开篇介绍
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
从零配置webpack(react+less+typescript+mobx)
本文目标从零搭建出一套支持react+less+typescript+mobx的webpack配置最简化webpack配置首页要初始化yarn和安装webpack的依赖 yarn init -y ...
2020前端最新面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）（3年前端菜鸟级开发师含泪总结）
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结希望能帮助大家) 本文是关注微信小程序 ...