一个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>

6.执行打包

webpack -w
监听文件变化，实时打包
webpack -d
提供SourceMaps，方便调试html