详解基于webpack搭建react运行环境
最近由于项目需要，所以尝试使用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="bundle.js" charset="utf-8"></script> </body> </html>
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 <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="bundle.js" charset="utf-8"></script> </body> </html>
浏览器访问 http://localhost:3000/ ， 页面显示Hello World，运行成功！
现在我们的文件目录为：
至此我们就搭建好了一个简单的环境啦～
框架Github地址：https://github.com/DQing/webpack-helloworld-demo.git
大家在搭建框架时不要忘了小步提交。
还可以进行一些额外的配置，步骤其实都差不多
框架Github地址：https://github.com/DQing/jishiben.git
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何使用 React Hooks 重构类组件,本文就来通过一些常见示例看看如何使用 React Hooks 来重构类组件，需要的朋友可以参考下2022-07-07
本篇文章主要介绍了详解react使用react-bootstrap当轮子造车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-08-08
这篇文章主要介绍了react中如何使用局部样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了详解react-refetch的使用小例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
目前好像只有table组件有实现表格数据的全选功能,如果说对于list,card,collapse等其他组件来说,需要自己结合checkbox来手动实现全选功能,这篇文章主要介绍了react antd checkbox实现全选、多选功能,需要的朋友可以参考下2024-07-07
如何解决React useEffect钩子带来的无限循环问题
本文主要介绍了解决React useEffect钩子带来的无限循环问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了react项目中redux的调试工具不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下2021-07-07
React Native 集成 ArcGIS 地图的详细过程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,本文给大家介绍React Native 集成 ArcGIS 地图的详细过程,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论