手动用webpack搭建第一个ReactApp的示例
学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境。
npm install -g create-react-app create-react-app my-app cd my-app npm start
使用淘宝 NPM 镜像
使用 React 和 Webpack 需要安装很多依赖包，不走代理的话速度会非常慢，也很容易出错，所以这里推荐使用淘宝的 npm 镜像来安装，速度非常理想。
使用淘宝镜像安装 npm 包只需要两步即可：
安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm 来安装包
只需要将 npm 替换成 cnpm 即可获得高速下载。
cnpm install [name]
下文中给出的所有安装依赖包的命令都使用 cnpm 安装的。你也可以用 npm。
开始第一个 React
初始化一个 json 配置文件
npm init
执行上面这条命令后输入一些信息即可创建 json 文件，这个文件也可以手动建。entry point 要填 index.js，其他的随意。
安装 React
cnpm install react react-dom --save
安装编译工具 babel
cnpm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save-dev
安装打包工具 wepback
全局的和当前文件夹的最好都装上，这样可以花式打包。
cnpm install webpack webpack-cli --save-dev cnpm install webpack-dev-server --save-dev cnpm install webpack webpack-cli -g cnpm install webpack-dev-server -g
配置 webpack
为了方便，以下所有文件都建在同一个文件夹下面。
新建 webpack.config.js 并添加以下内容
const path =require('path');
module.exports = {
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, ''),
filename: "bundle.js"
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["es2015","react"]
}
}
]
}
};
在 webpack4 中 mode 属性如果不指定会有警告。
创建测试文件
新建 index.js 文件
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>我的第一个react例子</h1>,
document.getElementById('root')
);
新建 index.html 文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>example</title> </head> <body> <div id="root"></div> <script src="bundle.js"></script> </body> </html>
启动
最后执行 webpack 即可将 index.js 打包生成浏览器可执行的 bundle.js 文件。此时，index.html 文件已经可在浏览器中执行了。
附上我的 package.json 文件，直接执行 cnpm install 就能安装所有依赖。
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack",
"start:dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
热启动
如果 index.js 发生了改变，则需要再编译打包一次，才能更新 bundle.js 文件，这样效率非常低。webpack 提供了一条命令可以实时进行编译打包。
webpack --watch
执行这条命令后，index.js 文件就能被动态编译打包了，非常方便。
不过上面的热启动还是很麻烦，还要手动刷新浏览器，这里还有很牛逼的。
直接执行 webpack-dev-server 即可自动刷新浏览器
如果要换端口的话，在启动命令后面加上--port 端口号即可，例如：webpack-dev-server --port 8001
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- webpack构建react多页面应用详解
- 利用yarn实现一个webpack+react种子
- webpack3+React 的配置全解
- 利用React-router+Webpack快速构建react程序
- 解决webpack -p压缩打包react报语法错误的方法
- React-router中结合webpack实现按需加载实例
- webpack入门+react环境配置
- 详解基于webpack搭建react运行环境
- 详解webpack2+node+react+babel实现热加载(hmr)
相关推荐
-
webpack3+React 的配置全解
webpack3 的配置相对于webpack2 又有了一些新的变化,这里讲其记录下来,备查 . package.json 的完整文件在结尾 . 1. 安装 npm init yarn add webpack webpack-dev-server -D 2. 配置简单输入输出 webpack.config.js module.exports = { entry: { ventor: ['react', 'react-dom'], index: [ 'babel-polyfill', 'react-
-
React-router中结合webpack实现按需加载实例
简要介绍:在React-router中,暴露了3个接口,如果结合webpack的code splitting,就通过切换路由实现按需加载. 1.webpack的code splitting webpack可以通过一些方法,来实现按需加载,暴露的接口为require.ensure require.ensure(["module-a", "module-b"], function() { var a = require("module-a"); //
-
利用yarn实现一个webpack+react种子
一.初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作,关于安装yarn,你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令: yarn init yarn 如果没有安装,全程用 npm代替也没问题. 项目会初始化 package.json ,然后填写一些基本信息即可. 接下来我们开始安装依赖项,再 package.json 的添加下面内容 "dependencies": { "react&
-
解决webpack -p压缩打包react报语法错误的方法
前言 最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍: 我的webpack配置: var webpack = require('webpack'); //打包less插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //这里的'./css/bundle.css'设置打包地址 var ExtractLess = new ExtractTextPlu
-
利用React-router+Webpack快速构建react程序
本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序,下面话不多说,感兴趣的可以一起学习学习. 初始化项目 我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息. $ npm init 接下来我们开始安装依赖项,我的 package.json 的依赖项如下 "devDependencies": { "babel": "^5.5.6", "babel-core":
-
详解webpack2+node+react+babel实现热加载(hmr)
前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行文件 node_modules node包 public 静态资源文件 static 静态资源 dist 编译后文件 src 项目js文件 .bablrc babel配置文件 webpack.config.dev.js开发模式webpack配置 webpack.config.pro.js生产模式we
-
webpack构建react多页面应用详解
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动
-
webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文
-
详解基于webpack搭建react运行环境
最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack
-
手动用webpack搭建第一个ReactApp的示例
学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境. npm install -g create-react-app create-react-app my-app cd my-app npm start 使用淘宝 NPM 镜像 使用 React 和 Webpack 需要安装很多依赖包,不走代理的话速度会非常慢,也很容易出错,所以这里推荐使用淘宝的 npm 镜像来安装,速度非常理想. 使用淘宝镜像安装 npm 包只需要两步即可: 安装 cnpm n
-
使用webpack搭建react开发环境的方法
1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新
-
karma+webpack搭建vue单元测试环境的方法示例
最近做了一次关于vue组件自动化测试的分享,现在将vue组件单元测试环境搭建过程整理一下.这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境. 准备 这篇文章的重点在于搭建测试环境,所以我随便写了个webpack的vue开发环境. 代码地址:https://github.com/MarxJiao/vue-karma-test 目录结构如下 目录结构 app.vue和child.vue代码 app.vue child.vue 运行效果如下: 运行效果 测试环境搭建 注意:这里
-
使用webpack搭建vue项目及注意事项
有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不
-
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api. 本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 二.目
-
使用webpack搭建vue环境的教程详解
1.安装node.js,在官网下载,直接下一步,完成.nodejs里默认包含npm环境.国内安装包的速度太慢,建议使用cnpm淘宝镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 2.vue-cli构建SPA应用 安装vue:npm install vue -g 安装vue-cli:npm install -g vue-cli 使用webpack构建一个简单项目:vue init webpack-simple d
-
使用webpack搭建pixi.js开发环境
本文介绍怎么使用webpack搭建pixi.js游戏的开发环境,怎么配置babel将ES6+代码最终转换为ES5,怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目. 前提 需要会简单使用nodejs,了解package.json,会简单使用npm init,npm install,npm run命令. 需要稍微了解webpack和gulp. 需要有google chrome浏览器. 最好会一点git,demo项目pixi-webpack-demo托管在github上,通过
-
使用Webpack 搭建 Vue3 开发环境过程详解
从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '
-
webpack搭建脚手架打包TypeScript代码
创建文件夹 目录结构: dabaots 初始化 npm init -y生成package.json文件 目录结构: dabaots dabaots / package.json 然后在开发环境中安装以下几个工具 npm i -D webpack··························(打包代码的核心工具 webpack-cli·····················(webpack的命令行工具) typescript ·······················(写ts所需的核心