学习建立基于react,webpack模板项目

我是一个react的初学者,在学习的过程中遇到了模板搭建问题,想把自己遇到的问题记录下来,顺便加深印象,有不对的地方请指正。

学习的过程中,我主要感谢两个人的博客:

  1. http://www.wukai.me/2016/09/14/create-a-react-webpack-es6-project/
  2. http://www.jianshu.com/p/42e11515c10f

这两个人的博客写的都非常好,感兴趣的同学可以去看看。

由于我之前没有接触过webpack,所以先学习了一下博客2,然后在按照博客1进行的实现。

什么是webpack?


通俗说是一个模块打包机。它分析项目结构,找到JavaScript模块以及一些不能直接运行的拓展语言,然后将其打包合适的格式以供浏览器使用。它的工作方式是:把项目当做一个整体,通过一个给定的文件,从改文件开始找到项目的所有依赖文件,使用loaders处理他们,最后打包为一个浏览器可识别的js文件。

项目结构

-src

  -index.js

  -App.js

-.babelrc

-index.html

-package.json

-server.js

-webpack.config.js

项目步骤

初始化项目

时间: 2024-08-11 01:36:11

学习建立基于react,webpack模板项目的相关文章

vue-cli的webpack模板项目配置文件分析

由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

Hibernate学习——建立一个简单的Hibernate项目

最近老师让做个web小应用,大三的时候学习过一点J2EE的东西,也做过一些web相关的XXX管理系统,都是用servlet,jsp这些完成的,虽然勉强能够完成任务,但其中各种代码掺杂在一起,不好看而且维护起来也很麻烦,出了一点问题要调试好久才能解决.这次打算让自己多学一点东西,在项目的架构上我使用了struts2实现了多层代码的分离,在数据库方面,因为以往的经历都需要对连接数据库进行一个封装,里面包含有数据库的连接,记录的添加,查询,修改和删除等操作,每次使用的过程中都需要先实现一个连接对象然后

Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构

通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目录以及文件结构 如图所示: 如上图所示,自动构建的vue项目的结构就是这样. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 项目开发依赖的一些模块 src 开发目录(

利用yeoman快速搭建React+webpack+es6脚手架

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统.基于webpack构建,并进行默认配置,可通过插件扩展,可升级: vue-cli帮我们创建基本项目结构,跳过繁琐的项目配置环节,将精力集中在业务上: vue-cli的版本: @vue/cli 3.x版本:点击前往官网 vue-cli 2.x版本:点击前往官网 安装vue-cli $ npm install -g vue-cli 安装成功,查看其版本: 使用we

react+webpack+ES6搭建项目

react+webpack+ES6打包搭建框架的步骤及部分详解 npm init 此条命令是创建一个npm项目 NPM 全称 node package manager, 是 nodejs 的包管理工具,使用它让我们可以更方便的使用别人的代码,以及向别人分享我们的代码. 执行后,npm会引导输入一些基本信息,可以默认按回车键,然后会生成一个package.json文件,包含基本信息,后续的依赖也会保存到它里边. npm install react react-dom --save 安装react和

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换

webpack学习(五)—webpack+react+es6

如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)- webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都会用到这个组合:webpack+react+es6 还是以一个项目举例,项目中的package.json是生成的,"devDependencies"都是自己安装加入,如果拷贝网上的资料,可以npm install直接生成.而为了一探react的具体开发流程,还是自己一个个安装比较好. 项目

一步一步建立 webpack 4 项目

一步一步建立 webpack 4 项目 cnpm init -y cnpm i webpack --save-dev cnpm i webpack-cli --save-dev 修改 package.json scripts 加入以下代码 "scripts": { "build": "webpack --mode=production", "dev": "webpack --mode=development"