webpack4.X + react搭建
环境准备工作：windows7、webStorm 2017.1.4、Nodejs 8.7.0、npm 5.4.2
PS:安装的时我们都带上版本，这样即便webpack版本发生变化，也不会出现版本问题。
初始化package.json文件
npm init
npm安装react、react-dom包
npm install react@16.3.0 react-dom@16.3.0 --save
或者
npm i -S react@16.3.0 react-dom@16.3.0
npm安装webpack、webpack-cli等包
npm install webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4 --save-dev
或者
npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4
文件夹结构
各个文件的内容
Index.jsx
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
这是首页women修改一下
</div>
);
}
}
export default Index;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Index from './views/Index'; ReactDOM.render(<Index/>, document.getElementById('app'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>react</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/index.js></script>
</body>
</html>
base.config.js
let config = {
entry: {
'index':'./src/index.js'
},
resolve: {
extensions: [".js", ".json", ".jsx", ".css"],
}
};
module.exports = config;
dev.config.js
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./base.config");//基础配置
const webpackFile = require("./file.config");//一些路径配置
let config = merge(baseWebpackConfig, {
/*设置开发环境*/
mode: 'development',
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name].js",
publicPath: ''
},
plugins: [
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'babel-loader',
],
include: [
path.resolve(__dirname, "../src")
],
exclude: [
path.resolve(__dirname, "../node_modules")
],
}
]
},
/*设置api转发*/
devServer: {
host: '0.0.0.0',
port: 8080,
hot: true,
inline: true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback: true,
disableHostCheck: true,
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://127.0.0.1:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
file.config.js
module.exports = {
devDirectory:'static',/*开发目录*/
proDirectory:'dist',/*发布目录*/
resource:'resource',/*静态资源*/
};
package.json文件中添加脚本命令
"dev": "webpack-dev-server --devtool eval --progress --colors --profile --config webpack/dev.config.js"
最后执行运行命令
效果图
代码地址：https://github.com/yangbiaoit/react-webpack
webpack4.X + react搭建的更多相关文章
- 教你怎么看网站是用react搭建的
概述 SPA和react可以说是web开发的分水岭,我一直在寻找判断网站是普通网站还是SPA抑或是react的方法.今天突然找到一个判断网站是不是react搭建的简便方法.现在记录下来供以后开发时参考 ...
- webpack4构建react脚手架
create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
- webpack+react搭建环境
近日自己项目遇到需要用webpack搭建react环境,查了挺多 ,自己总结一下 1.下载安装最新版node.js(https://nodejs.org/en/) 2.主要看自己网络情况,可以选择安装 ...
- react --- 搭建环境
搭建react开发环境的准备工作 1. node.js 稳定版本 2. 安装cnpm,用cnpm代替npm 3. 用yarn替代npm yarn的安装:npm install -g yarn 搭建re ...
- 如何使用React搭建项目
1.首先说明node.js.npm.cnpm分别是做什么的? node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm - ...
- 使用react搭建组件库：react+typescript+storybook
前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...
- vue项目环境搭建（webpack4从零搭建）--仅个人记录
一.nodejs环境搭建 首先需要下载node.js(推荐直接官网找最新的版本),下载完成后会自带npm包管理工具,打开cmd命令行界面,输入npm -v .node -v检查node.js与npm是 ...
- Vite+React搭建开发构建环境实践
前言 使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多. 虽然相比于 webpack 来说简单 ...
随机推荐
- Java实现 蓝桥杯VIP 算法提高 Quadratic Equation
算法提高 Quadratic Equation 时间限制:1.0s 内存限制:512.0MB 问题描述 求解方程ax2+bx+c=0的根.要求a, b, c由用户输入,并且可以为任意实数. 输入格式: ...
- Java实现 LeetCode 13 罗马数字转整数
13. 罗马数字转整数 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...
- Java实现BFS广度优先查找
1 问题描述 广度优先查找(Breadth-first Search,BFS)按照一种同心圆的方式,首先访问所有和初始顶点邻接的顶点,然后是离它两条边的所有未访问顶点,以此类推,直到所有与初始顶点同在 ...
- java实现 洛谷 P1540 机器
import java.util.LinkedList; import java.util.Scanner; public class Main { private static Scanner ci ...
- PAT 科学计数法
科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...
- Python 图像处理 OpenCV （7）：图像平滑（滤波）处理
前文传送门: 「Python 图像处理 OpenCV (1):入门」 「Python 图像处理 OpenCV (2):像素处理与 Numpy 操作以及 Matplotlib 显示图像」 「Python ...
- MAC/VMware配置双机调试简述
Configuration 注:建议提前备份所有修改内容,可能会导致无法开机. 我的测试环境: server: windows 10 + windbg client: windows 7 Server ...
- tensorflow2.0学习笔记第一章第五节
1.5简单神经网络实现过程全览
- 8、react 高阶组件
1.高阶组件:封装 高阶组件使用得是react得一种模式,增强现有组件得功能 一个高阶组件就是一个函数,这个函数接收得是组件类作为参数得,并且返回得是一个新组件,再返回得新组件中有输入参数组件不具备得 ...
- 利用java从docx文档中提取文本内容
利用java从docx文档中提取文本内容 使用Apache的第三方jar包,地址为https://poi.apache.org/ docx文档内容如图: 目录结构: 每个文件夹的名称为日期加上来源,例 ...