当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-11 16:19 编辑：来源：阅读：
扫一扫，手机访问

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

最近由于项目需要，所以尝试使用webpack搭建react运行环境，在克服了一系列困难后，终于能在页面输出"Hello World"，特地把整个过程记录下来，利人利己。首先我创建了一个文件夹[code]webpack-helloworld-demo[/code]，之后的大部分操作都会在这个文件夹下进行。 [b]1.初始化文件夹[/b]

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

[b]2.搭建webpack环境[/b]

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

[code]--save[/code]建议使用，这样当别人clone你的代码时，只需要[code]npm install[/code]就可以安装好所有需要的依赖，并且你也可以在你的[code]package.json[/code]文件夹中看到你使用的哪些依赖。现在我们可以测试下webpack有没有安装成功，在文件夹根目录下创建三个文件，分别是[code]entry.js[/code]，[code]bundle.js[/code]，[code]index.html[/code]，文件内容分别如下。

//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>

[b]bundle.js内容为空[/b] 执行命令行：[code]webpack ./entry.js bundle.js[/code] 之后会发现bundle.js文件下有好多代码出现，这就是经过webpack打包后的文件。在浏览器打开index.html,页面会出现Hello World，webpack安装成功！ [b]3.配置webpack[/b] 创建[code]webpack.config.js[/code]文件，进行如下基本配置

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,配置成功。现在我们的文件目录如下： [img]http://files.jb51.net/file_images/article/201706/201761110819275.png?20175111829[/img] [b]4.express下运行[/b]

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，运行成功！ [b]5.配置 React, ES6 & Babel 6[/b]

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，运行成功！现在我们的文件目录为： [img]http://files.jb51.net/file_images/article/201706/201761111107050.png?201751111117[/img] [b]至此我们就搭建好了一个简单的环境啦～[/b] 框架Github地址：[url=https://github.com/DQing/webpack-helloworld-demo.git]https://github.com/DQing/webpack-helloworld-demo.git[/url] 大家在搭建框架时不要忘了小步提交。还可以进行一些额外的配置，步骤其实都差不多框架Github地址：[url=https://github.com/DQing/jishiben.git]https://github.com/DQing/jishiben.git[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JavaScript正则表达式的贪婪匹配和非贪婪匹配
下一篇：JS中解决谷歌浏览器记住密码输入框颜色改变功能

资讯排行榜
更多>>