搭建 react+webpack开发环境

2017-07-14 本文已影响189人 977777

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

1.创建项目文件夹webpack-hello-demo
npm init 初始化文件夹产生package.json文件
2.安装webpack

npm install webpack --save-dev 安装webpack依赖
创建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>

创建入口文件entry.js（touch entry.js）
document.write("hello")
创建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-loader!css-loader"  },
            //加载css
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/, //不进行转换的文件，可以提高打包速度
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader?limit=1000&name=images/[name].[ext]',//加载图片
            }
        ]
    }
};

配置文件创建完成后执行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，运行成功。

所有的文件都在根目录下：

文件结构

这样就搭建好啦

搭建 react+webpack开发环境

猜你喜欢

热点阅读