React多页面应用1(webpack开发环境搭建,包括Bab

2017-12-28 本文已影响162人前端人人

微信公众号首发！这边文章排版可能不好，请关注公众号，查看历史消息！

本教程总共7篇,每日更新一篇,请关注我们,敬请期待!

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 目录下

import Reactfrom 'react';

class Indexextends React.Component {

constructor(props) {

super(props);

this.state = {seconds:0 };

}

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 default Index;

建立 index.html

存放再根目录下-> build 下

商城页: Index.jsx

存放在 app->component->shop目录下

import Reactfrom 'react';

class Indexextends React.Component {

constructor(props) {

super(props);

this.state = {seconds:0};

}

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 default Index;

建立 shop.html

存放再根目录下-> build 下

react1

我们会在后面课程中讲解如何自动化生成 html 页面,就不用手动了!

注:如果组件在编译器中文件报错请设置webstrom

6.建立webpack 入口文件

entryBuild -> index.js

import Reactfrom 'react';

import ReactDOMfrom 'react-dom';

import Indexfrom '../app/component/index/Index.jsx';

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

7.配置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:'build',/*开发目录*/

proDirectory:'pc',/*发布目录*/

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, {

output: {

path: path.resolve(webpackFile.devDirectory),

filename:'js/[name].js',

chunkFilename:"js/[name]-[id].js",

publicPath:''

},

plugins: [

/*设置开发环境*/

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: JSON.stringify('development'),

}

}),

/*设置热更新*/

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;