您的位置：首页 > Web前端 > React

搭建 react+webpack开发环境

2017-08-13 20:23 489 查看

以前尝试过几个教程的搭建方法但是最后都失败了，最后在豆青学姐的简书教程和李婷婷学姐的帮忙下解决了这个问题，下面简单记录一下。

1.创建项目文件夹webpack-hello-demo

npm init  初始化文件夹产生package.json文件

2.安装webpack

(1)

npm install webpack --save-dev  安装webpack依赖

(2)创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

(3)创建入口文件entry.js(touch entry.js)

document.write("hello")

(4)创建bundle.js文件内容为

三个文件都创建之后运行命令 webpack ./entry.js bundle.js会看到bundle.js中生成了很多代码，这就是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']
}
}
]

b37e
}
};

配置文件创建完成后执行webpack 再运行index.html文件出现hello说明配置成功

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，运行成功。

5.配置react es5 babel6

这里需要安装一些依赖，执行下面的命令

npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save
npm install --save-dev babel-preset-react

创建文件.babelrc

{
"presets": [
"es2015",
"react"
]
}

6.

使用react例子测试

entry.js:

import React, {Component} from 'react';
import {render} from "react-dom";

class HelloMessage extends React.Component {

render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div>  // 添加的div，渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

完成之后执行命令

webpack

打包文件

执行

node server.js

开启服务器

浏览器访问 http://localhost:3000/ ，页面显示hello，运行成功。

所有文件目录

-webpack-demo

-node_modules

-.babelrc

-bundle.js

-entry.js

-index.html

-package.json

server.js

webpack.config.js

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航