前端新手如何搭建webpack+react的开发环境

步骤: 首先保证有node 和 npm环境。运行node -v 和npm -v查看版本号来确定

注意:

初始化npm环境并安装插件:

没有项目:想在Window命令下创建项目

有项目:cd 到相应的项目

进入之后,运行npm init (初始化)按照步骤依次确认 yes

最终生成package.json文件.

所有使用npm做的依赖管理项目,根目录下都会有一个这个文件,该文件

描述了项目的基本信息以及一些第三方依赖插件

安装插件

使用 webpack 作为构建工具,需要安装相应插件,运行 npm install webpack

安装之后最好查看版本号:如果太低,以下的webpack配置目前支持2.0版本以下的版本。

想要3.0以上的是组件化方式配置:升级方式:

npm update webpack --dev -save

或者:yarn update webpack --dev -save  (如果安装了yarn推荐)

webpack-dev-server --save-dev 来安装两个插件。

webpack-dev-server 这是webpack开发的运行环境

安装成功如下图:

使用 react ,安装相应插件,运行 npm i react react-dom --save来安装两个插件。

安装成功如下图:

Webpack和react都安装完成之后,查看package.json可看到多了devDependencies和dependencies两项,根目录也多了一个node_modules文件夹。

devDependencies要下载多个开发依赖包。不用一个个下载。

把需要的开发依赖复制到package.json里面:

执行npm install

如果报错,一种可能性是node版本过低。没有装yarn解决方案可以尝试:

先下载 yarn 执行npm i yarn -g

完成之后执行 yarn install即可;

配置webpack.config.js

webpack.config.js和webpack.production.config.js两个文件可以引入现有成熟的版本。目前引入的版本仅支持webpack 2.0以下的版本

webpack.config.js

node命令require我们安装的webpack查找的是main 下面的这个js文件

Entry入口文件:需要新建./app/index.jsx作为入口文件,目前项目中只有这一个入口文件。

Output输出就是一个bundle.js,js 和 css 都在里面,发布代码的时候才会出现。

Resolve 拓展:表示支持三种格式。“ ”是index.js 后缀可以省略

不同类型的文件,使用不同的loader

Loaders是我们引入别人配置文件要修改的主要的部分。需要啥。写啥

一般不用。超级严格模式。缺冒号等等都会报错

在app目录下也要新建index.tmpl.html页面

所有配置文件准备好

在 package.json 中,windows中将下图所示命令封装为npm start,然后运行npm start或者yarn start  

失败的原因:看一下是不是安装的webpack的版本是2.0以下的。和package.json中webpack的版本号是一致的

报错原因:引入了别人的依赖包有less或者sass

解决方案就是:先执行 npm install node-gyp -g

还要安装.net或者visual studio 2013(desk)

时间: 2024-10-12 12:48:57

前端新手如何搭建webpack+react的开发环境的相关文章

从零开始搭建webpack+react开发环境

环境主要依赖版本 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] webpack安装及配置 1. 起步 新建项目目录,初始化npm,新建开发源目录 mkdir webpack-react && cd webpack-react npm init -y mkdir src 2.webpack

Sublime Text 3 搭建 React.js 开发环境

ublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展.关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展 安装 PC:Ctrl+shift+p Mac:Cmd+shift+p 打开面板输入babel安装 配置 打开.js, .jsx 后缀的文件; 打开菜单view, Synt

[转载]Sublime Text 3 搭建 React.js 开发环境

[转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel-sublime 支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展.关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展 安装 PC:Ctrl+shift+p Mac:Cmd+shift+p 打开面板输

在Mac上搭建React Native开发环境

概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装NodeJS和其他工具. 注:Homebrew详解,对这个比较了解的略过,我也是用mac没多久,这里给小白普及下. Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn't i

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s

在Node.js上搭建React.js开发环境

1.React.js的介绍: React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. 特点: 1.声明式设计 ?React采用声明范式,可以轻松描述应用. 2.高效 ?React通过对DOM的模拟,最大限

React Native开发 - 搭建React Native开发环境

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

vue_使用npm搭建vue2.0脚手架开发环境

前言: 在使用vue进行开发时需要搭建vue的运行环境,这里主要是使用淘宝镜像cnpm进行搭建vue的脚手架开发环境.主要是分为mac和window两个版本,两个环境的搭建都是大同小异. mac开发环境的搭建: 1.安装Node.js(这个只需要去nodeJS官网下载安装就可以了) 以下的命令都是在终端输入 2.在电脑终端使用命令 node -v 检查版本(检查安装成功) 3.安装淘宝npm镜像 sudo npm install -g cnpm --registry=https://regist