React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04
2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08
3、React多页面应用3(webpack4 多页面实现)---2018.04.09
4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10
5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11
6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12
7、React多页面应用7(webpack4 生产环境配置)---2018.04.13
8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16
9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
最近webpack3升级了到webpack4,好多童鞋按照第一篇教程做,会出问题,主要是我当时没有考虑按版本号安装导致的,今天我们用webpack4配置个工程!这次我们安装依赖的时候,带上版本号,以后大家不管什么时候,看到这篇教程,照着做,应该不会出大问题,如有问题在下面留言,或者公众号内联系我们!
好了,废话不多说,我们开始撸码!
1、新建工程 react2
2、初始化工程
npm init -y
3、建立工程目录
--app 主目录
--component react组件目录
--index 首页目录
--public 公共目录 主要放 js css img
--js 公共js文件
--css css目录
--img 图片目录
--devBuild webpack 开发环境下 打包输出目录
--config 打包配置目录
--webpack webpack配置目录
--entryBuild webpack 打包入口文件目录
目录没有展开状态
目录展开状态
4、安装react
npm i -S react@16.3.0 react-dom@16.3.0
-S 意思是保存 到 package.json dependencies 字段
5、安装 webpack babel 相关依赖
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
-D 意思是保存 到 package.json devDependencies字段
注意复制的时候要是一行的,不能换行!
6、新建Index.jsx文件
首页: Index.jsx
存放在 app->component->index 目录下
完整代码
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
这是首页
</div>
);
}
}
export default Index;
7、建立 index.html
存放再 根目录下-> devBuild 下
完整代码
<!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>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/index.js></script>
</body>
</html>
8、建立webpack 入口文件
entryBuild -> index.js
完整代码
import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/index/Index.jsx';
ReactDOM.render(<Index/>,document.getElementById('app'));
9、配置webpack
基础配置:
config -> webpack -> webpack.base.conf.js
完整代码
let config = {
entry: {
'index':'./entryBuild/index.js'
},
resolve: {
extensions: [".js", ".json", ".jsx", ".css",".pcss"],
}
};
module.exports = config;
文件路径配置
config -> webpack -> webpack.file.conf.js
完整代码
module.exports = {
devDirectory:'devBuild',/*开发目录*/
proDirectory:'dist',/*发布目录*/
resource:'resource',/*静态资源*/
};
开发环境配置:
config -> webpack -> webpack.dev.conf.js
完整代码
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置
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, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
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://192.168.12.100:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
红框部分就是webpack4 与webpack3 变化支出
以下是webpack3截图,打红叉的是webpack4 变化的部分,我们会在下面教程讲解如何提取公共包!
10、配置babel
根目录下 .babelrc
完整代码
{
"presets":["react","env"],
"env":{
"development": {
"presets":["react-hmre"]
}
}
}
注:react-hmre 是 babel-preset-react-hmre 用于开启 热替换
11、配置npm执行命令
在跟目录下 package.json 里配置 scripts 字段
"dev": "webpack-dev-server --devtool eval --progress --colors --profile --config config/webpack/webpack.dev.conf.js",
12、执行 npm run dev
执行完截图
浏览器截图
我们来修改一下看看能不能 热替换
- 《linux c编程指南》学习手记5
- AngularJS API之bootstrap启动
- 通过 JS 判断页面是否有滚动条的简单方法
- Log4j官方文档翻译(六、日志的级别)
- AngularJS API之isXXX()
- 《linux c编程指南》学习手记4
- Kibana中doc与search策略的区别
- jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)
- Log4j官方文档翻译(五、日志输出的方法)
- AngularJS API之copy深拷贝
- 光标定位,隐藏光标
- AngularJS API之toJson 对象转为JSON
- Log4j官方文档翻译(七、日志格式化)
- Log4j官方文档翻译(八、文件输出)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一天一大 lee(表示数值的字符串)难度:中等-Day20200902
- 一天一大 lee(单词搜索)难度:简单-Day20200913
- 一天一大 lee(克隆图)难度:中等-Day20200813
- 一天一大 lee(相同的树)难度:简单-Day20200807
- 一天一大 lee(解数独)难度:困难-Day20200915
- 一天一大 lee(复原IP地址)难度:中等-Day20200809
- 一天一大 lee(计数二进制子串)难度:简单-Day20200810
- 一天一大 lee(打家劫舍 III)难度:中等-Day20200805
- 一天一大 lee(课程表)难度:中等-Day20200804
- 一天一大 leet(二叉树展开为链表)难度:中等-Day20200802
- 一天一大 leet(字符串相加)难度:简单-Day20200803
- 一天一大 lee(恢复二叉搜索树)难度:困难-Day20200808
- 一天一大 leet(最小区间)难度:困难-Day20200801
- 一天一大 lee(全排列 II)难度:中等-Day20200918
- 一天一大 lee(冗余连接 II)难度:困难-Day20200917