一个webpack，react，less，es6的DEMO

2017-04-06 本文已影响0人 beijing_beijing

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>
        )
    }
})

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，方便调试