一个webpack，react，less，es6的DEMO
生活随笔
收集整理的這篇文章主要介紹了
一个webpack，react，less，es6的DEMO
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.package.json如下
{"name": "demo","version": "1.0.0","description": "一個(gè)簡(jiǎn)單的示例","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呢？原因是它插件機(jī)制雖好，但是打包太慢了。
所以用回babel5.8，速度可以。
關(guān)于^符號(hào)就不說了吧。
^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版本有路徑超長(zhǎng)問題，超過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嘛，就是忽略這個(gè)目錄打包。
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.執(zhí)行打包
webpack -w
監(jiān)聽文件變化，實(shí)時(shí)打包
webpack -d
提供SourceMaps，方便調(diào)試
總結(jié)
以上是生活随笔為你收集整理的一个webpack，react，less，es6的DEMO的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sublime golang 开发的时候
- 下一篇： Linux：终端自定义title