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

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

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

1.初始化文件夹

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

2.搭建webpack环境

rush:bash;"> npm install webpack --save-dev //安装webpack依赖

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

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

rush:js;"> //entry.js document.write('Hello World');

rush:xhtml;"> //index.html <Meta charset="UTF-8">

浏览器访问 http://localhost:3000/ ， 页面显示Hello World，运行成功！

现在我们的文件目录为：

至此我们就搭建好了一个简单的环境啦～

框架Github地址：https://github.com/DQing/webpack-helloworld-demo.git

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

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

框架Github地址：https://github.com/DQing/jishiben.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。