详解如何用webpack4从零开始构建react开发环境


Posted in Javascript onJanuary 27, 2019

项目文件准备:

执行npm init,然后创建如下图所示的文件。

详解如何用webpack4从零开始构建react开发环境

在index.html里面添加

<!DOCTYPE html>
<html>
 <head>
  <title>The Minimal React Webpack Babel Setup</title>
 </head>
 <body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
 </body>
</html>

在webpack.config.js里面添加

module.exports = {
 entry: './src/index.js',
 output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
 },
 devServer: {
  contentBase: './dist'
 }
};

在package.json里面添加

"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development"
 },

这样,当执行npm start的时候,就会使用webpack-dev-server把index.js相关文件打包,生成bundle.js,这时候浏览器会打开一个窗口,执行index.html(contentBase里面定义了),又因为index.html里面引入了bundle.js,就可以把压缩后的js文件执行起来。当然引入bundle.js这一步可以由我们强大的html-webpack-plugin完成。

安装依赖

npm install --save-dev webpack webpack-dev-server webpack-cli
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
npm install --save-dev @babel/preset-react

配置babel

在根目录下新建.babelrc文件,然后添加

{
 "presets": [
  "@babel/preset-env",
  "@babel/preset-react"
 ]
}

在webpack.config.js里面添加babel-loader配置

module.exports = {
 ...
 module: {
  rules: [
   {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader']
   }
  ]
 },
 resolve: {
  extensions: ['*', '.js', '.jsx']
 }
 ...
};

引入react

npm install --save react react-dom

修改index.js: 这个ReactDOM.render就是把元素渲染到index.html里面id为'app'的元素厦门。在实际开发中,我们会把app.js渲染到这里,然后在app.js里面写redux,react-router构成的页面的起点。

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
 <div>{title}</div>,
 document.getElementById('app')
);

配置react热加载

npm install --save-dev react-hot-loader

webpack.config.js

const webpack = require('webpack');

module.exports = {
 ...
 plugins: [
  new webpack.HotModuleReplacementPlugin()
 ],
 devServer: {
  contentBase: './dist',
  hot: true
 }
 ...
};

修改index.js

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
 <div>{title}</div>,
 document.getElementById('app')
);

+ module.hot.accept();

这个时候执行npm start,就可以在浏览器访问http://localhost:8080看到Index.html里面的内容啦啦。参考链接:
https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#babel-react-setup

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

Javascript 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
js查找节点的方法小结
Jan 13 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue中轮训器的使用
Jan 27 #Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 #Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 #Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 #Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 #Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 #Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 #Javascript
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Django框架 信号调度原理解析
2019/09/04 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python 递归相关知识总结
2021/03/03 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
小学生红领巾广播稿
2014/01/21 职场文书
家长学校实施方案
2014/03/15 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
安全标语口号
2014/06/09 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
体育运动会广播稿
2014/10/05 职场文书
2014年司法局工作总结
2014/12/11 职场文书
北京颐和园导游词
2015/01/30 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
创业计划书之物流运送
2019/09/17 职场文书