一個webpack，react，less，es6的DEMO

時間 2019-11-14

標籤一個 webpack react es6 demo 欄目 React 简体版

原文原文鏈接

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命令刪除吧。javascript

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嘛，就是忽略這個目錄打包。css

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>