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

项目文件准备：

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

在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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Electron构建React+Webpack桌面应用的方法

    使用Electron构建React+Webpack桌面应用的方法

    前言 Electron可以使用HTML.CSS.JavaScript构建跨平台桌面应用,可是在使用到React和Webpack时,会遇到一些配置问题,本文将针对React+Webpack下的Electron配置提供一个通用的解决方案. 环境配置 "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-class-proper

  • 利用React-router+Webpack快速构建react程序

    本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序,下面话不多说,感兴趣的可以一起学习学习. 初始化项目 我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息. $ npm init 接下来我们开始安装依赖项,我的 package.json 的依赖项如下 "devDependencies": { "babel": "^5.5.6", "babel-core":

  • 浅谈React + Webpack 构建打包优化

    浅谈React + Webpack 构建打包优化

    本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化 检查没有使用的库,去除 import 引用 按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是 在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这

  • webpack构建react多页面应用详解

    webpack构建react多页面应用详解

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动

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

    项目文件准备: 执行npm init,然后创建如下图所示的文件. 在index.html里面添加 <!DOCTYPE html> <html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <body> <div id="app"></div> <script src="./

  • 详解使用create-react-app快速构建React开发环境

    最近在折腾react开发,总结一个react环境搭建的教程,写得比较细碎,基本上就是自己的搭建步骤了,希望能够帮助到有需要的小伙伴. 常用的脚手架 react-boilerplate react-redux-starter-kit create-react-app(git上关注量最大) 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-re

  • 详解如何使用Docker部署Django+MySQL8开发环境

    前一段时间重装了系统,然后我还没有备份,导致电脑里的开发环境全都没有了. 一想到又要装 Python 环境,还要装数据库,然后安装过程中还可能报一堆错就头疼. 最近正在学习 Docker,这不正好解决了我当前的痛点了吗?而且,不止这次重装系统,以后再重装都不怕了,只要拿着 Dockerfile 和 docker-compose 文件,不管到什么环境,一条命令轻松跑起来. 之前部署 Python 开发环境,都是用的 virtualenv,或者是 Pipenv.这次使用 Docker 之后,对比下来

  • 详解基于webpack和vue.js搭建开发环境

    详解基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理--不忍直视 2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的-- 3.数据的渲染使用模板引擎,

  • 详解如何利用docker快速构建MySQL主从复制环境

    在学习MySQL的过程中,常常会测试各种参数的作用.这时候,就需要快速构建出MySQL实例,甚至主从. 考虑如下场景: 譬如我想测试mysqldump在指定--single-transaction参数的情况下,对于myisam表的影响. 本来想在现成的测试环境中进行,但测试环境中,有大量的数据,执行mysqldump进行全备,产生的SQL文件,很难基于表进行搜索. 这个时候,就特别渴望能有一套干净的实例进行测试. 此刻,快速构建能力就显得尤为必要,很多童鞋可能会问,通过脚本不就能实现么?为什么要

  • 详解用Webpack与Babel配置ES6开发环境

    安装 Webpack 安装: # 本地安装 $ npm install --save-dev webpack webpack-cli # 全局安装 $ npm install -g webpack webpack-cli 在项目根目录下新建一个配置文件-- webpack.config.js 文件: const path = require('path'); module.exports = { mode: 'none', entry: './src/index.js', output: { f

  • 详解如何用SpringBoot 2.3.0.M1创建Docker映像

    1.发布 SpringBoot2.3.0.M1刚刚发布,它带来了一些有趣的新特性,可以帮助您将SpringBoot应用程序打包到Docker映像中.在这篇博客文章中,我们将查看创建Docker映像的典型方式,并展示如何通过使用这些新特性来改进这些镜像 2.说明 SpringBoot 2.3.0.M1 暂时不支持Windows, 很鸡肋 暂时在Mac 和Linux 上运行良好 3.常见的Docker 运行方式 一般情况下,通过docker 运行springboot 是这样的 FROM openjd

  • 详解如何用js实现一个网页版节拍器

    目录 引言 1. 需求分析 2. 素材准备 3. 开发实现 3.1 框架选型 3.2 模块设计 3.3 数据结构设计 3.4 播放逻辑 3.5 音频控制 3.6 动效 3.7 大屏展示 3.8 新增人声发音 4. 部署 5. 后续工作 5.1 目前存在的问题 ios声音 5.2 TODO 切换不同音效 引言 平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:ahao430.github.io/metronome/. 代码见github仓库:github.com/ah

  • docker在win10家庭版下构建laravel开发环境的教程详解

    操作系统: win10 家庭版 安装docker: 官网下载的docker无法安装成功,提示操作系统版本问题~~~~ 所以直接下载了阿里提供的docker安装包: http://mirrors.aliyun.com/doc ... 社区版是-ce后缀的 阿里镜像加速 首先登录阿里云 查找容器镜像服务 win10找到C:Users用户.dockermachinemachinesdefault底下有个config.json文件,在属性RegistryMirror添加加速器地址,docker虚拟机重启

  • 详解如何用alpine镜像做一个最小的镜像并运行c++程序

    需求 工作中我们如果要制作镜像,一般都是直接pull官方镜像,比如我们要运行一个c++程序我们可能直接pull一个gcc,或者ubuntu镜像就可以了,但是存在一个问题,我们只是要运行一个c++程序却要运行一个ubuntu系统,这是非常消耗资源的,所以就去网上搜了搜发现早期的docker都是使用alpine镜像来做基础镜像,所以就用alpile镜像来制作镜像 dockerfile FROM alpine:3.7 MAINTAINER Rethink #更新Alpine的软件源为国内(清华大学)的

随机推荐