由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑。。。希望读者能引以为戒。我的是macos系统

https://www.bilibili.com/video/av37668737/?p=9

准备

node.js官网http://nodejs.cn/download/,下载安装node

建议安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

创建空项目文件夹。

输入:npm init -y

在项目根目录创建src源代码目录和dist产品目录

src目录下创建index.html, index.js

(index.html页面可输入:!加回车来快速生成)

(创建index.js后可能会报错,此时终端输入cnpm install -g eslint即可)

依赖安装

  cnpm i webpack  -D
cnpm i webpack-cli -D

创建目录及配置文件

创建webpack.config.js 并编写配置文件。

module.exports = {
  mode: "development"
}

保存,然后终端输入webpack

已经设置了mode还是有WARNING,百度了下需要

修改package.json 下

在script中添加如下代码:

"build": "webpack --mode production"

输入webpack还是WARNING,并没什么用

真正解决方法:

webpack --mode=development

神奇的没任何错误了。

cnpm i webpack-dev-server -D

package.json下的script中添加如下代码:

"dev": "webpack-dev-ser

npm run dev

index.html页面添加<script src="/dist/main.js"></script>

修改package.json中:

"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"

cnpm i html-webpack-plugin -D

修改webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})

module.exports = {
mode: "development",
plugins: [
htmlPlugin
]
}

cnpm i react react-dom -S

index.js添加如下

import React from 'react'
import ReactDOM from 'react-dom'

const myh1 = React.createElement('h1', null, '这是个大大的H1')

ReactDOM.render(myh1, document.getElementById('app'))

相应修改index.html

保存,npm run dev。到这就差不多了。

下面介绍个更简单的方法

下面介绍个更简单的方法

下面介绍个更简单的方法

重要的事说三遍哈哈。

对于mac用户:

  1.打开终端

  2.输入cd desktop

  3.输入:npx create-react-app test

  4.cd test

  5.npm start

  妥了,桌面上的test就是搭的框架  

搭建 webpack + react 框架爬坑之路的更多相关文章

  1. 从零开始搭建Webpack+react框架

    1.下载node.js Node.js官网下载 , 安装: 安装成功后在控制台输入node -v 可查看当前版本: $ node -v v10.15.0 输入npm -v查看npm版本: $ npm ...

  2. React Native 爬坑之路

    1.react 基础 (创建组件及在浏览器上渲染组件) <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  4. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  5. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  6. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  7. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  8. Tinker爬坑之路

    目的 热修复去年年底出的时候,变成了今年最火的技术之一.依旧记得去年面试的时候统一的MVP,然而今年却变成了RN,热修复.这不得不导致我们需要随时掌握最新的技术.不然可能随时会被淘汰.记得刚进公司,技 ...

  9. 安卓易学,爬坑不易—腾讯老司机的RecyclerView局部刷新爬坑之路

    前言 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真 ...

随机推荐

  1. supervisor模块学习使用

    supervisor组件 supervisord supervisord是supervisor的服务端程序. 启动supervisor程序自身,启动supervisor管理的子进程,响应来自clien ...

  2. uptimerobot 监控

    前言 由于搞了多个公共服务于多台vps,需要监控项目稳定性与服务器稳定性,考察了阿里云云监控与uptimerobot,最后选择了uptimerobot 教程 访问官网,注册账号 : https://u ...

  3. Spring boot 官网学习笔记 - Using Spring Boot without the Parent POM,但是还要使用Parent POM提供的便利

    If you do not want to use the spring-boot-starter-parent, you can still keep the benefit of the depe ...

  4. 阿里云服务器ecs配置之安装nginx

    一.简介 Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttpd具有占有内存少,稳定性高等优势.它最常的用途是提供反向代理服务. 二 .安装 1.准备工作 Nginx ...

  5. 【ADO.NET基础-Session】Session的基本应用

    在服务端存储状态的对象:Session和Application 在客户端存储状态的对象:Cookie 1.Session:每个独立的浏览器都会创建一个独立的Session,不是一台电脑一个Sessio ...

  6. Kubernetes 系列(三):Kubernetes使用Traefik Ingress暴露服务

    一.Kubernetes 服务暴露介绍 从 kubernetes 1.2 版本开始,kubernetes提供了 Ingress 对象来实现对外暴露服务:到目前为止 kubernetes 总共有三种暴露 ...

  7. Android Studio 优秀插件:GsonFormat

    作为一个Android程序猿,当你看到后台给你的json数据格式时: { "id":123, "url": "http://img.donever.c ...

  8. Android系统介绍与框架

    一.Andriod是什么? Android系统是Google开发的一款开源移动OS,Android中文名被国内用户俗称“安卓”.Android操作系统基于Linux内核设计,使用了Google公司自己 ...

  9. 关于jQery中$.Callbacks()的理解

    $.Callbacks()主要使用了回调,而说到回调又不得不说javascript的事件循环机制了. 所以想了解回调最好先看看js运行机制. $.Callbacks()可以理解为创建一个回调队列 va ...

  10. Windows搭建SVN服务器

    安装 1.下载地址:https://www.visualsvn.com/files/VisualSVN-Server-4.0.3-x64.msi 2.开始安装: 3.安装配置: 4.Next直到完成 ...