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/

随便修改下保存,右侧浏览器会自动热更新

本文完

本文来自企鹅号 - 全球大搜罗媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

微信小程序插件

微信小程序插件是对一组js接口,自定义组件或页面的封装,用来嵌入微信小程序中,用来被开发者调用。

2.1K30
来自专栏君赏技术博客

自定义输入框造轮子大法ZHAddressTextFiled

这个输入框是输入把默认提示语上移,我记得有第三方库,但是我就想造轮子,所以就除了这个。

11930
来自专栏Java后端技术

Target runtime Apache Tomcat v6.0 is not defined.错误解决方法

  最近在使用本地的tomcat进行运行项目的时候,发现出现了如题所述的问题。不知道什么原因,经过努力解决了该问题。

8910
来自专栏Python小屋

Python批量导入图片生成PowerPoint 2007+文件

使用方法:安装扩展库python-pptx,然后把上文中抓取的图片和本程序放在同一个文件夹。 import os import pptx from pptx.u...

32130
来自专栏向治洪

Webpack+Babel+React开发环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

25060
来自专栏葡萄城控件技术团队

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2)...

22260
来自专栏源码之家

DEDEcms 采集规则批量修改替换

2、从phpmyadmin中导出表dede_co_note,导出格式可选为CSV。

25310
来自专栏前端下午茶

JS 回调模式

如果有个模块 findeNodes() ,任务是找到期望的 DOM 元素并使用 hide() 处理:

16910
来自专栏从零开始学自动化测试

Appium+python自动化19-iOS模拟器(iOS Simulator)安装自家APP

前言 做过iOS上app测试的小伙伴应该都知道,普通用户安装app都是从appstore下载安装,安装测试版本的app,一般就是开发给的二维码扫码安装, 或者开...

40630
来自专栏CodingBlock

Android查缺补漏(View篇)--布局文件中的“@+id”和“@id”有什么区别?

Android布局文件中的“@+id”和“@id”有什么区别? +id表示为控件指定一个id(新增一个id),如: <cn.codingblock.view.c...

32480

扫码关注云+社区

领取腾讯云代金券