webpack 快速构建 React 学习环境(1)

  • 时间:
  • 浏览:0
  • 来源:5分PK10APP下载_5分PK10APP官网

React 官方有一套脚手架工具,是初学者的最好选取,可不可不还后能 让初学者集中注意力在 React 有一种 。

本篇主要目的是总结何如搭建另1个最小 React 项目的开发环境,适合抵触脚手架工具,何如让又可不可不还后能 另1个 React 练习环境的初学者。对 webpack 及相关插件的相关东西基本一笔就带过了。你这俩 作为开发还过低智能,如不可不可不还后能 热加载,每次对代码有修改就要重新编译,重新刷新页面,你造毫无开发体验可言,哪此,请参考第二篇: webpack 快速构建 React 学习环境(2)-- 热更新

使用 webpack 打包可不可不还后能 创建另1个 webpack 配置文件, webpack4 越来太大配置项全部总要了默认值,这里是我被委托人的另1个简单配置。

在项目根目录下创建 babel 的配置文件 .babelrc:

build/index.html:

此时 package.json 内容如下

首先创建 src、build 另1个目录

基于 webpack 构建另1个最小 React 项目开发环境,以把下面的 React 组件成功渲染在页面上为目标,即显示 Hello React 到页面。

安装和配置你这俩 插件:

src/index.js:

2、使用 html-webpack-plugin 插件自动生成文件 html 文件,并插入 <script> 标签的社会形态。 [html-webpack-plugin] (https://github.com/jantimon/html-webpack-plugin#options) 插件很智能,可不可不还后能 根据你的配置生成你我想要的 html。

被委托人对脚手架很重儿抵触(将会主只是对未知的恐惧),从刚刚刚刚刚开始学习 React 就走了被委托人搭建开发环境的路线,这里总结下搭建过程,希望能帮助和我一样不愿使用脚手架工具,但又急需另1个练习环境的初学者。

文章同步发布在被委托人博客站点

安装 babel loader

这是将会 babel 可不可不还后能 配置 react preset 来支持 react 语法解析。

React 项目依赖的软件包 react、react-dom 是可不可不还后能 的。将会目标是要构建使用 webpack 打包的开发环境,webpack、webpack-cli 不可不可不还后能 少。

这是将会 react 使用的 es6 语法可不可不还后能 使用: babel-loader 来翻译 es6 及最新的 js 语法

node_modules 是依赖包的安装目录,package-lock.json 是依赖包版本锁定。可不可不还后能 保证多个环境将会多个战略战略公司合作 开发环境中依赖包版本一致性。

编译成功后在 build 目录下生成了 index.html 和打包后的 js 文件 main.e09b122c.js,index 文件只是 html-webpack-plugin 插件生成的,会自动插入生成的 js 文件。

模版文件 src/index.html, 内容如下:

在 src 目录下创建 webpack 打包的入口文件

只是开头提到的在页面上显示 'Hello React' 的小应用。

1、最基本的打包入口、出口的配置 (webpack4 入口、出口有默认配置)

继续报错:

congratulations! 成功编译:

webpack.config.js 配置:

完成总要在项目根目录下生成 package.json 文件:

用浏览器打开 build/index.html 文件,就可不可不还后能 看过 Hello React 正常输出。

package.json 文件的作用是记录各个软件的依赖关系,累似 Rails 中的 Gemfile

报错:

报错如下:

再次编译

这是可不可不还后能 加 'mode' 参数,加参数后运行:

安装 @babel/preset-react :

webpack.config.js:

修改 babel 配置文件 .babelrc:

此时项目社会形态如下:

猜你喜欢

2018上半年有事业单位招聘吗?有的话是什么时候?

扫描二维码下载可选中另三个 多或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个问提。换一换你对你这些 回答的评价是?中公教育是一家全国性综合职业教育企

2020-03-22

架构之路:从管理者的角度看问题

只能 管理的本质是那些?那些才是你这个有效的管理?管理的精髓是那些?……你说歌词 你这个 制度好!对你当然好了,但manager心里苦啊。虽然任何有三个小制度就有利弊参半

2020-03-22

五个问题的简短回复【调试、求职疑虑、编程能力提高、做题】

【两根评论】(有读者按《CodeBlocks调试功能快捷教程》走,发现走不下去。核实,意识到可能性是Code::Blocks中的一还还有一个Bug。)初学C++,我敲教材上复杂

2020-03-22

微信小程序正式上线 下一波红利来临?

在张小龙看来,移动互联网的下一站是“唾手可得”。6.小系统线程切换:小系统线程支持挂起请况,即多窗口概念,用户可不并能把小系统线程先挂起,而且做别的事情,在需用你这名小系统线程

2020-03-22

游客vqwytl6gp2ayy的主页

flink运营若有阿里后边件(Aliware)官方账号周晓,阿里云数据库运营负责人文章:11丨粉丝:27626丨话题:2目前在阿里巴巴后边件技术部EDAS团队从事开发工作分布式

2020-03-21