React多页面应用1
1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28
2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29
3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30
4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31
5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01
6.React多页面应用6(webpack自动化发布到多个环境,测试环境、预生产环境等)----2018.01.02
7.React多页面应用7(引入eslint代码检查)----2018.01.03
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
新建项目 react1
初始化工程
npm init -y
安装相关依赖
npm i -S react react-dom
-S 意思是保存 到 package.json dependencies 字段
npm i -D webpack webpack-dev-server webpack-merge babel-cli babel-preset-env babel-preset-react babel-preset-react-hmre babel-loader
-D 意思是保存 到 package.json devDependencies字段
建立工程目录
react
--app主目录
--componentreact组件目录
--index首页目录
--public公共目录 主要放 js css img
--js公共js文件
--buildwebpack 打包输出目录
--config打包配置目录
--webpackwebpack配置目录
--entryBuildwebpack 打包入口文件目录
5.新建页面
首页: Index.jsx
存放在 app->component->index 目录下
importReactfrom'react';
classIndexextendsReact.Component {
constructor(props) {
super(props);
this.state= {seconds:};
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds+1
}));
}
componentDidMount() {
this.interval=setInterval(() =>this.tick(),1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return(
这是首页
Seconds: {this.state.seconds}
);
}
}
export defaultIndex;
建立 index.html
存放再 根目录下-> build 下
react1
商城页: Index.jsx
存放在 app->component->shop目录下
importReactfrom'react';
classIndexextendsReact.Component {
constructor(props) {
super(props);
this.state= {seconds:};
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds+1
}));
}
componentDidMount() {
this.interval=setInterval(() =>this.tick(),1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return(
这是商城
Seconds: {this.state.seconds}
);
}
}
export defaultIndex;
建立 shop.html
存放再 根目录下-> build 下
react1
我们会在 后面课程中讲解 如何自动化生成 html 页面,就不用手动了!
注:如果组件在编译器中文件报错 请设置webstrom
6.建立webpack 入口文件
entryBuild -> index.js
importReactfrom'react';
importReactDOMfrom'react-dom';
importIndexfrom'../app/component/index/Index.jsx';
ReactDOM.render(,document.getElementById('app'));
7.配置webpack
基础配置:
letconfig = {
entry: {
'index':'./entryBuild/index.js'
},
resolve: {
extensions: [".js",".json",".jsx",".css",".pcss"],
}
};
module.exports= config;
文件路径配置
module.exports= {
devDirectory:'build',/*开发目录*/
proDirectory:'pc',/*发布目录*/
resource:'resource',/*静态资源*/
};
开发配置:
constwebpack =require('webpack');//引入webpack
constopn =require('opn');//打开浏览器
constmerge =require('webpack-merge');//webpack配置文件合并
constpath =require("path");
constbaseWebpackConfig =require("./webpack.base.conf");//基础配置
constwebpackFile=require("./webpack.file.conf");//一些路径配置
letconfig = merge(baseWebpackConfig,{
output: {
path: path.resolve(webpackFile.devDirectory),
filename:'js/[name].js',
chunkFilename:"js/[name]-[id].js",
publicPath:''
},
plugins: [
/*设置开发环境*/
newwebpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*设置热更新*/
newwebpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test:/.(jsjsx)$/,
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;
8.配置babel
根目录下 .babelrc
{
"presets":["react","env"],
"env":{
"development":{
"presets":["react-hmre"]
}
}
}
注:react-hmre 是 babel-preset-react-hmre 用于开启 热替换
10.配置npm命令
再跟目录下 package.json 里配置 scripts 字段
"dev":"webpack-dev-server --devtool eval --progress --colors --profile --config config/webpack/webpack.dev.conf.js",
11.执行 npm run dev
会自动打开浏览器 http://localhost:8080/
随便修改下保存,右侧浏览器会自动热更新
本文完
- 五个解决方案让MongoDB拥有RDBMS的鲁棒性事务
- Step By Step 一步一步写网站[1] —— 帧间压缩,表单控件
- [WCF-Discovery]如何利用”发现代理”实现可用服务的实时维护?
- 深度学习与机器学习
- Step By Step 一步一步写网站[1] —— 填加数据(二)
- [WCF-Discovery]让服务自动发送上/下线通知[原理篇]
- [WCF-Discovery]让服务自动发送上/下线通知[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[原理篇]
- [自定义服务器控件] 第一步:文本框。
- 检查两个数据库里的表名、字段是否一致的一种方法
- 如何在Python中从零开始实现随机森林
- 基类、接口的应用——表单控件:一次添加、修改一条记录,一次修改多条记录。(上)
- 使命必达: 深入剖析WCF的可靠会话[协议篇](下)
- 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 数组属性和方法
- spring动态调用方法
- Spring AOP动态代理原理与实现方式
- 基于注解多数据源解决方案
- Java并发编程:CountDownLatch、CyclicBarrier和Semaphore
- 你需要实现一个高效的缓存,它允许多个用户读,但只允许一个用户写,以此来保持它的完整性,你会怎样去实现它?
- java阻塞队列得实现
- 谈谈如何利用 valgrind 排查内存错误
- 用java写一个死锁
- Runnable和Thread比较
- 使用@ConditionalOnProperty注解
- Java注解Annotation与自定义注解详解
- spring boot 配置多个DispatcherServlet
- 基于Pytorch实现的MASR中文语音识别
- Quartz.NET 配置文件详解
- 如何用redis正确实现分布式锁?