搭建 react+webpack开发环境

最新推荐文章于 2023-08-24 17:31:39 发布

wen_special

最新推荐文章于 2023-08-24 17:31:39 发布

阅读量773

点赞数

分类专栏：环境配置

本文链接：https://blog.csdn.net/wen_special/article/details/77149685

版权

环境配置专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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']
                }
            }
        ]
    }
};

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

wen_special

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搭建 react+webpack开发环境

以前尝试过几个教程的搭建方法但是最后都失败了，最后在豆青学姐的简书教程和李婷婷学姐的帮忙下解决了这个问题，下面简单记录一下。1.创建项目文件夹webpack-hello-demonpm init 初始化文件夹产生package.json文件2.安装webpack (1)npm install webpack --save-dev 安装webpack依赖(2)创建index.html文件<!DO
复制链接

扫一扫