webPack+react 环境搭建

前端之家收集整理的这篇文章主要介绍了webPack+react 环境搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前提 机子 已经搭建好 node.js 和npm 包管理器。

1,新建空文件夹 执行安装命令。

windows cmd 进入一下文件夹内:
执行一下命令:

  1. 1npm init //初始化 包管理器 会生成一个package.json文件
  2.  
  3. 2npm install webpack --save //安装 webpack 用于监听文件变化
  4.  
  5. 3,npm install webpack-dev-server --save //
  6. webpack 服务
  7. 4,npm install --save-dev react react-dom babelify babel-preset-react //安装项目 依赖 react 以及 Babel 当然你也可以 分开安装。
  8.  
  9. 5,npm install babel-preset-es2015 --save-dev //安装es6
  10.  
  11. 6npm install babel-loader --save

以上 全部是 本地安装 当然你也可以 使用 npm install -g 惊醒全局安装。

安装后package.json如图:

  1. {
  2. "name": "webreactbabeldemo","version": "1.0.0","description": "\"环境搭建测试\"","main": "index.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1" },"author": "","license": "ISC","dependencies": { "babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babelify": "^7.3.0","react": "^15.6.1","react-dom": "^15.6.1","webpack": "^3.5.6","webpack-dev-server": "^2.7.1" } }

2,配置webpack:

根目录下新建webpack.config.js文件 内容如下:

  1. //引入webpack 模块 以及 path
  2. var webpack = require('webpack');
  3. var path = require('path');
  4.  
  5. //制定 项目入口 以及编译文件名称 以及输出目录
  6. module.exports = {
  7. context:__dirname + '/src',entry:"./js/index.js",module:{
  8. loaders:[{
  9. test:/\.js?$/,exclude:/(node_modules)/,loader:'babel-loader',query:{
  10. presets:['react','es2015']
  11. }
  12. }]
  13. },output:{
  14. path:__dirname + "/src/",filename:"bundle.js"
  15. }
  16. };

新建 src 文件夹 src下新建js文件夹 js 文件夹下新建 index.js文件

根目录下新建 index.html

3,代码编写:

index.html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Meta charset="utf-8"/>
  5. </head>
  6. <body>
  7.  
  8. <div id="demo"> 这是新建项目测试环境</div>
  9.  
  10. <script src = "./src/bundle.js"></script>
  11. </body>
  12. </html>

index.js:

  1. // var React = require('react');
  2. // var ReactDOM = require('react-dom');
  3. import React from 'react';
  4. import ReactDOM from 'react-dom';
  5.  
  6. //测试 找到文档中 demo节点 替换参数数据
  7. ReactDOM.render (
  8. <h1> 这是需要替换并显示数据信息 </h1>,document.getElementById('demo')
  9. );

cmd 执行 命令:

webpack

webpack-dev-server

4,显示结果 :

注意浏览器的访问的bundle.js 以及缓存和编译延迟问题。需要实时更新界面的
请自行查阅webpack-dev-server实时监听文件变化。

项目源码:https://github.com/229457269/webpack-React-EnvmentDemo/tree/master

猜你在找的React相关文章