bundle.js内容为空

执行命令行：webpack ./entry.js bundle.js

之后会发现bundle.js文件下有好多代码出现，这就是经过webpack打包后的文件。在浏览器打开index.html,页面会出现Hello World，webpack安装成功！

3.配置webpack

创建webpack.config.js文件，进行如下基本配置

module.exports = {

entry: "./entry.js", // 要打包的入口文件

output: { //打包后的文件

path: __dirname, //表示使用绝对路径

filename: "bundle.js" //输出文件名

},

module: {

loaders: [ //用于加载一些静态文件夹（css样式，图片之类）

{ test: /\.css$/, loader: "style!css" },

{

test: /\.jsx?$/,

loader: 'babel-loader',

exclude: /node_modules/, //不进行转换的文件，可以提高打包速度

query: {

cacheDirectory: true,

presets: ['react', 'es2015']

}

}

]

}

};

执行命令：webpack

打开index.html出现Hello World,配置成功。

现在我们的文件目录如下：

4.express下运行

npm install express --save-dev

创建server.js

var express = require('express');

var app = express();

app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html

app.listen(3000, function () {

console.log('Example app listening on port 3000!');

});

执行命令：

webpack // 用于打包文件

node server.js // 开启服务器

浏览器访问 http://localhost:3000/ ， 页面显示Hello World，运行成功！

5.配置 React, ES6 & Babel 6

npm install react --save-dev

npm install react-dom --save-dev

npm install babel-loader --save-dev // 转换JSX

npm install babel-core --save-dev // babel的核心包

npm install babel-preset-es2015-dev // es2015的babel预设

npm install babel-preset-react-dev // react的babel预设

创建文件.babelrc

{

"presets": [

"es2015",

"react"

]

}

接下来就是写react小例子测试啦，在entry.js写入：

import React, {Component} from 'react';

import {render} from "react-dom";

class HelloMessage extends React.Component {

render() {

return

}

}