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，方便調試