react.js使用webpack搭配环境的入门教程


Posted in Javascript onAugust 14, 2017

本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记

如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令

npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js
create-react-app my-app //使用create-react-app创建,my-app为项目名称
cd my-app/ //进入my-app目录
npm start //运行项目

现在打开 http://localhost:3000/ 就能看到初始界面

 我不大愿意使用官方自带这个脚手架,是因为它的webpack配置太复杂,我比较愚钝看不大懂,还望有大神能研究透彻分享一下。

要如何create-react-app内部的webpack配置文件解压出来?

npm run eject

源代码

每次看教程我都喜欢先把项目跑起来,然后再一句一句代码地去了解。如果你也是:

git clone https://github.com/lingjiawen/HelloReact.git
cd HelloReact/
npm install
npm run dev

一、创建项目结构

新建一个文件夹,命名为HelloReact

顺口提一下,我用的IDE是Sublime

在该文件夹内这样组织你的项目结构:

|--app   //项目组件
 |--components   //组件结构
 |---Hello.jsx
 |--main.js   //入口文件
|--build   //项目build文件
 |--index.html   //索引html
|--.babelrc   //babel转码工具配置文件

|--package.json  //npm说明文件,可以理解为包管理文件
|--webpack.config.js  //webpack配置文件

在build/index.html中拷贝以下代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ReactDemo1</title>
 </head>
 <body>
 <!--插入React组件的位置-->
 <div id="main">
 </div>
 <script src="bundle.js"></script>
 </body>
</html>

React代码插入到main中,而bundle.js是webpack打包生成的js文件,在这里你可以先帮它记下来下文看到了再回来一看就清楚了。

在package.json中输入以下代码:

注意,所有的注释都不要输入进去!

//package.json
{
 "name": "HelloReact",  //项目名字
 "version": "1.0.0",  //项目版本
 "main": "webpack.config.js", 
 "scripts": {
 "start": "webpack",  //npm start的配置
 },
 "author": "",   //作者
 "license": "ISC",
 "devDependencies": {
 //调试依赖项
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-plugin-react-transform": "^2.0.2",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-react": "^6.24.1",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-transform-hmr": "^1.0.4",
 "webpack": "^3.4.1",
 },
 "description": "",
 "dependencies": {
 //项目依赖项

 }
}

在webpack配置文件webpack.config.js中输入以下代码:

var webpack = require('webpack');//引入Webpack模块,注意这里只能使用ES5语法引入


module.exports = {
 entry: __dirname + "/app/main.js",//唯一入口文件
 output: {
 path: __dirname + "/build",//打包后的bundle.js文件存放的地方
 filename: "bundle.js" //打包后的文件名
 },
 module: {
 //loaders加载器
 loaders: [
  {
  test: /\.(js|jsx)$/, //匹配loaders所处理的文件的扩展名的正则,如jsx和js文件
  loader: 'babel-loader' //loader的名称
  }
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin()//热模块替换插件
 ]
};

.babelrc是babel转码器的配置文件,它能将es6代码转换成es5代码,还支持react语法转换

在.babelrc中输入以下代码:

//.babelrc
{
 "presets": [
 "react",
 "es2015"
 ],
 "env": {
 "development": {
 "plugins": [
 [
  "react-transform",
  {
  "transforms": [
  {
  "transform": "react-transform-hmr",
  "imports": [
   "react"
  ],
  "locals": [
   "module"
  ]
  }
  ]
  }
 ]
 ]
 }
 }
}

在app/components/Hello.jsx中输入以下代码:

import React from 'react'; //引入react

//创建组件类:名字首字母必须大写
class Hello extends React.Component {
 render() {
 return (
  <div>Hello World!</div>
 )
 }
}

//导出组件
export default Hello;

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

它看起来是在Javascript代码里直接写XML的语法,而实质上是一个语法糖,每一个XML标签都会被JSX转换工具(如babel)转换成纯Javascript代码

在app/main.js中输入以下代码:

//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/Hello.jsx';

ReactDOM.render(
 <Hello />,
 document.getElementById('main')
);

二、运行项目

打开命令行,cd到HelloReact文件夹目录,运行

npm install

该命令会安装package.json的所有依赖文件,安装完成后,运行:

npm start

npm start命令是刚才你在package.json中定义的:

"scripts": {
 "start": "webpack",
 }

注:只有start可以省略run,其他都需要加上run,如 npm run dev;

你会发现build.js中多了bundle.js文件,这是你在webpack.config.js中定义的打包文件:

var webpack = require('webpack');//引入Webpack模块,注意这里只能使用ES5语法引入

module.exports = {
 ……
 output: {
 path: __dirname + "/build",//打包后的bundle.js文件存放的地方
 filename: "bundle.js" //打包后的文件名
 },
 ……
};

打开该目录下的index.html,看到以下输出运行成功:

react.js使用webpack搭配环境的入门教程

三、添加热替换模块

项目已经可以运行了,但是每次输完代码都要npm start进行打包,想想都没办法忍受,这就需要用到webpack-dev-server热替换模块,所见即所得

其实在前面的代码中,为了避免麻烦,我已经偷偷将热替换模块的部分配置加了进去

webpack.config.js中的

……
plugins: [
 new webpack.HotModuleReplacementPlugin()//热模块替换插件
 ]
……

package.json中的 

"devDependencies": {
 ……
 "babel-plugin-react-transform": "^2.0.2",
 "react-transform-hmr": "^1.0.4",
 "webpack-dev-server": "^2.6.1"
 ……
 }

还有.babelrc中的

"env": {
 "development": {
 "plugins": [
 [
  "react-transform",
  {
  "transforms": [
  {
  "transform": "react-transform-hmr",
  "imports": [
   "react"
  ],
  "locals": [
   "module"
  ]
  }
  ]
  }
 ]
 ]
 }
 }

你可以将这些代码删除,发现也是可以正常打包并运行。因为之前并没有用到热加载

那我现在想用,要怎么用呢?

很简单,在package.json中加入:

…… 
"scripts": {
 "start": "webpack",
 "dev": "webpack-dev-server"
 }
……

好,现在运行一下npm run dev

打开localhost:8080

react.js使用webpack搭配环境的入门教程

咦,怎么是列出文件列表,哦哦哦,原来是没有配置默认路径;

…… 
"scripts": {
 "start": "webpack",
 "dev": "webpack-dev-server --contentBase='./build' "
 }
……

重新运行npm run dev:

 react.js使用webpack搭配环境的入门教程

修改app/components/Hello.jsx

react.js使用webpack搭配环境的入门教程 

保存后再回到页面,发现页面已经自动更新:

react.js使用webpack搭配环境的入门教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
JS原生数据双向绑定实现代码
Aug 14 #Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
关于在mongoose中填充外键的方法详解
Aug 14 #Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 #Javascript
jQuery:unbind方法的使用详解
Aug 14 #jQuery
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 #Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 #Javascript
You might like
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python中的随机函数小结
2018/01/27 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
学校介绍信范文
2014/01/14 职场文书
安全教育实施方案
2014/03/02 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
入党函调证明材料
2014/12/24 职场文书
行政二审代理词
2015/05/25 职场文书
小学生读书笔记范文
2015/06/30 职场文书
大学生受助感言
2015/08/01 职场文书
商场广播稿范文
2015/08/19 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android