详解如何用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 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
JS中的模糊查询功能
Dec 08 Javascript
js实现上传图片到服务器
Apr 11 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
php 调试利器debug_print_backtrace()
2012/07/23 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
浅谈对yield的初步理解
2017/05/29 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python实现抽奖小程序
2020/04/15 Python
tensorflow多维张量计算实例
2020/02/11 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
车间班组长的职责
2013/12/13 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
公司员工奖惩制度
2015/08/04 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS