详解基于webpack搭建react运行环境

站长资源 2024/11/26 佚名

2 0 1

最近由于项目需要，所以尝试使用webpack搭建react运行环境，在克服了一系列困难后，终于能在页面输出"Hello World"，特地把整个过程记录下来，利人利己。

首先我创建了一个文件夹webpack-helloworld-demo，之后的大部分操作都会在这个文件夹下进行。

1.初始化文件夹

npm init //初始化一个package.json文件
git init  //产生.git文件，便于之后版本提交回退

2.搭建webpack环境

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

--save建议使用，这样当别人clone你的代码时，只需要npm install就可以安装好所有需要的依赖，并且你也可以在你的package.json文件夹中看到你使用的哪些依赖。

现在我们可以测试下webpack有没有安装成功，在文件夹根目录下创建三个文件，分别是entry.js，bundle.js，index.html，文件内容分别如下。

//entry.js
document.write('Hello World');

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

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"text-align: center">


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 <div>Hello World</div>;
  }
}
render(<HelloMessage />, document.getElementById('app'));




为了将组件渲染到页面，我们需要在index.html中添加一个相当于容器的div：


<!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="/UploadFiles/2021-04-02/bundle.js">

浏览器访问 http://localhost:3000/ ， 页面显示Hello World，运行成功！
现在我们的文件目录为：



至此我们就搭建好了一个简单的环境啦～
框架Github地址：https://github.com/DQing/webpack-helloworld-demo.git


大家在搭建框架时不要忘了小步提交。


还可以进行一些额外的配置，步骤其实都差不多


框架Github地址：https://github.com/DQing/jishiben.git
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    webpack,搭建,react,reactjs,webpack搭建,reactjs,webpack搭建

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“详解基于webpack搭建react运行环境”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

详解基于webpack搭建react运行环境

Node.js+ES6+dropload.js实现移动端下拉加载实例

jQuery+Ajax实现用户名重名实时检测

评论“详解基于webpack搭建react运行环境”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接