webpack构建react项目(一)
前言
下面是我们使用到技术栈:
webpack + react + redux + react-router + react-thunk + ES6 + ....
注意事项：
建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过)
一、新建项目目录
config : webpack 配置文件
dist： 打包后代码
src： 源码目录
二、基础配置
安装基础的包
// 生成默认package.josn 文件
npm init // 安装 webpack 和 webpack-dev-server
npm install webpack webpack-dev-server --save-dev // 安装 react react-dom
npm install react react-dom --save // 安装 babel-core 、babel-loader、babel-preset-env、babel-preset-react
npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev // html-webpack-plugin 生成html文件
npm install html-webpack-plugin --sav-dev
添加 webpack 配置
先添加部分基础文件：
config/webpack/file.path.js
const { resolve } = require('path')
// 项目根目录
const projectPath = process.cwd()
// 代码地址目录
const srcPath = resolve(projectPath, 'src')
// 入口文件目录
const mainPath = resolve(srcPath, 'main')
// 入口文件
const indexJsPath = resolve(mainPath, 'index.jsx')
const indexHtmlPath = resolve(mainPath, 'index.html')
module.exports = {
srcPath,
mainPath,
indexJsPath,
indexHtmlPath
}
config/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, indexJsPath, indexHtmlPath } = require('./file.path.js')
// 生成HTML文件
const generateIndex = new HtmlWebpackPlugin({
inject: 'body',
filename: 'index.html',
template: indexHtmlPath
})
module.exports = {
// 基础目录（绝对路径），用于从配置中解析入口点和加载程序
// 默认使用当前目录，但建议在配置中传递一个值。这使得您的配置独立于CWD（当前工作目录）
context: srcPath,
// 入口文件
entry: indexJsPath,
// 输入配置
output: {
},
// 模块配置
module: {
rules: [
{
test: /\.jsx?$/,
use: 'babel-loader'
}
]
},
// 插件配置
plugins: [
generateIndex
]
}
添加 babel 配置 .babelrc:
.babelrc
{
"presets": [
"env", // babel 启动插件
"react" // 编译react语法插件
]
}
添加入口文件 src/main/index.jsx:
import React from 'react'
import ReactDOM from 'react-dom' const render = () => {
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById('app-container')
)
} render()
添加 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack react配置</title>
</head>
<body> </body>
</html>
在package.json 中添加启动命令：
{
...
"scripts": {
"start": "webpack-dev-server --config config/webpack.config.js"
},
...
}
现在可以直接在cmd中运行:
npm run start
可以在浏览器打开 http://localhost:8080/ ，你可以看到一下效果：
完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons%201
三、高级配置
1. 添加 react-router
// 安装 react-router-dom
npm install react-router-dom --save
添加 src/main/app.js
import React, { Component } from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import Home from '../containers/Home'
import About from '../containers/About'
import Topics from '../containers/Topics'
// BrowserRouter 下只能有一个子元素
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</BrowserRouter>
)
}
}
export default App
添加 containers/Home/index.js
import React, { Component } from 'react'
const Home = () => {
return (
<div>
Home
</div>
);
}
export default Home
添加 containers/About/index.js
import React from 'react' const About = () => (
<div>
about
</div>
) export default About
添加 containers/Topics/index.js
import React from 'react'
const Topics = () => {
return (
<div>
topics
</div>
);
}
export default Topics
修改 src/main/index.jsx 文件
import React from 'react'
import ReactDOM from 'react-dom' import App from './app.js' const render = Component => {
ReactDOM.render(
<Component />,
document.getElementById('app-container')
)
} render(App)
路由我们添加完了，可以运行项目， 在浏览器 http://localhost:8080/ 预览效果。
react-router路由有 BrowserRouter和HashRouter 两种路由，两者的区别：
BrowserRouter 使用HTML5 历史API, HashRouter 使用哈希值
例如：如果同一个修改用户信息路由,在BroserRouter下显示 user/edit,而在HashRouter 下显示为 #/user/edit
刷新页面BrowserRouter会向服务端发送请求，后台要做一定处理，而HashRouter 不会向服务端发送请求
在react-router 4.0 的文档中有这样一段话：
注意： 使用 hash 的方式记录导航历史不支持 location.key 和 location.state。 在以前的版本中，我们为这种行为提供了 shim，但是仍有一些问题我们无法解决。 任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用 <BrowserHistory> 代替。
完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons2
2.配置redux 、react-thunk
// 安装redux react-redux
npm install redux react-redux react-thunk --save
添加 src/main/store.js
import { combineReducers, createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducers from '../reducers'
const middleware = [thunk]
const store = createStore(
combineReducers(rootReducers),
{},
applyMiddleware(...middleware)
)
export default store
添加 src/reduxcers/index.js
function userInfo(state = {}) {
return {
name: 'react'
}
}
export default {
userInfo
}
修改 src/main/app.js
import { Provider } from 'react-redux'
import store from './store'
...
render() {
return (
<Provider store={store}>
...
</Provider>
)
}
...
修改 src/tontainers/Home/index.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
const Home = ({ userInfo }) => {
return (
<div>
Home
<div>
这是redux中的数据
{userInfo.name}
</div>
</div>
);
}
const mapStateToProps = ({ userInfo }) => {
return {
userInfo
}
}
const mapDispatchTopProps = {}
// 使用connect 关联redux
export default connect(mapStateToProps, mapDispatchTopProps)(Home)
redux我们添加完了，可以运行项目， 在浏览器 http://localhost:8080/ 预览效果。
完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons3
3.配置 react 热加载
修改 config/webpack.config.js
const webpack = require('webpack')
...
// 插件配置
plugins: [
...
// 开启全局的模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),
// 热加载中可以输入更加友好的模块名
new webpack.NamedModulesPlugin()
]
...
devServer: {
hot: true
}
...
这样配置已经可以实现热加载了，但是并不算结束，还需要配置 react-hot-loader 的热加载插件，这是因为 webpack-dev-server只能即时的刷新页面，但是组件中的状态保存不住，因为React有一些自己的语法（jsx）是HotModuleReplacementPlugin处理不了。而react-hot-loader 在 --hot 基础上做了额外的处理,来保证状态可以存下来。
// 安装 react-hot-loader
npm install react-hot-loader --save
修改 .babelrc
{
"presets": [
["env", {
"modules": false
}],
"react"
],
"plugins": ["react-hot-loader/babel"]
}
添加 react-hot-loader/patch 和 publicPath 到 webpack.config.js,
...
module.exports = {
...
// 入口文件
entry: [
'react-hot-loader/patch',
indexJsPath
],
// 输入配置
output: {
publicPath: '/'
},
...
}
...
修改 src/main/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './app.js' const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root'),
)
} render(App) // Webpack Hot Module Replacement API
if (module.hot) {
module.hot.accept('./containers/App', () => { render(App) })
}
react-hot-loader 就配置完成了，现在更改三个页面中的文件，就可以在页面中实时看到。
配置时注意事项：
- 必须将webpack配置中output下publicPath设置为"/",否则无法实现热加载
- 将.babelre 中设置babel env预设更改为不使用Babel转换成ES2015模块 [ "env": { "modules": false } ]
- react-hot-loader在webpack-dev-server的热加载基础上做了额外的处理，所以必须要打开webpack-dev-server的 hot模式 才可以实现热加载
react-hot-loader我们添加完了，可以运行项目， 在浏览器 http://localhost:8080/ 预览效果。
完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons4
4. 配置各种资源的loader
css资源加载器
// 安装 style-loader css-loader postcss-loader
npm install style-loader css-loader postcss-loader --save-dev
下面是webpack.config.js 中的配置
...
// 模块配置
module: {
rules: [
...
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader'
}
]
}
...
]
},
...
使用postcss需要添加postcss.config.js
module.exports = {
plugins: [
// 添加你需要的插件，这个后面会提到
]
}
之前一直使用sass，但是这里并没有选择sass、less等css预处理框架，个人认为postcss是一个平台，提供了丰富的插件，可以更好处理css。
图片资源的加载
// 安装 url-loader file-loader
npm install url-loader file-loader --save-dev
下面是webpack.config.js 中的配置
...
// 模块配置
module: {
rules: [
...
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
...
]
},
...
url-loader: 可以将图片小于8192(根据limit设置而定)的图片装成base64和源码添加在一起，减少请求，提高加载速度。
file-loader: 对url-loader无法处理的图片资源(大于limit设置的值),使用此loader进行处理，当然这个loader还可以加载字体图标等文件，这里就不在详细添加了。
完整代码地址：https://github.com/haozhaohang/library/tree/master/webpack%20react%E9%85%8D%E7%BD%AE/lessons5
基本的配置都讲完了，后续系列中会讲到优化webpack配置、开发生成配置的拆分、构建优化和服务代理，mock数据等功能
如果本文对你有帮助，请给个 star，感谢^_^
webpack构建react项目(一)的更多相关文章
- 和我一起使用webpack构建react项目
第一步:初始化项目并创建package.json文件 第二步:创建webpack.config.js文件,并写入配置. 第三步:安装webpack以及创建es6语法环境,要将html作为模板文件解析的 ...
- 【转载】基于webpack构建react项目
第一部分链接:下载所需内容并构建基础的页面 第二部分链接:添加webpack中的一些常用babel和loader 第三部分链接:开发环境与生产环境的配置
- [react001] 使用webpack自动构建react 项目
1.react 简介 React 是一个Facebook出品的前端UI开发框架.react官方的tutorials 为了让人容易上手,并没有给在平常工作使用react的详细配置,随意学习的深入,你为了 ...
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- 基于webpack的React项目搭建(一)
前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- 使用 Dawn 构建 React 项目
开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...
- 在visual code的debugger for chrome中调试webpack构建的项目
一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...
- webpack构建react多页面应用
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...
随机推荐
- 以太坊开发DApp入门教程——区块链投票系统（一）
概述 对初学者,首先要了解以太坊开发相关的基本概念. 学习以太坊开发的一般前序知识要求,最好对以下技术已经有一些基本了解: 一种面向对象的开发语言,例如:Python,Ruby,Java... 前 ...
- Java并发编程实战（chapter_2）（对象发布、不变性、设计线程安全类）
一.发布与溢出 "发布(Publish)"一个对象的意思是指,使对象能够在当前作用于之外的代码中使用.这个"之外",尤为关键,各种出问题的地方,都是因为这个&q ...
- react的基本使用，及常用填坑
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './First.css'; ...
- beta冲刺2-咸鱼
q前言:今天晚上大概把github的的相关东西弄上了.然后把之前做的一些修改什么的也上传上去了.目测之后的话就是在自己这边改完然后直接上github那边去复制粘贴替换掉了. 昨天的问题:github这 ...
- C语言的第一次作业总结
PTA实验作业 题目一:温度转换 本题要求编写程序,计算华氏温度150°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验代码: ...
- 对于分支界限法的理解（补出门门票-week13，结对伙伴对我提的问题的答案）
首先我的结对伙伴给我提出了一个这样的问题: 使用分支界限法求解"背包问题"的步骤. 当时我是这样回答他的: ub=v+(W-w)x(v(i+1)/w(i+1)) 这个问题我在课上也 ...
- python的Flask 介绍
Flask 介绍 知识点 微框架.WSGI.模板引擎概念 使用 Flask 做 web 应用 模板的使用 根据 URL 返回特定网页 实验步骤 1. 什么是 Flask? Flask 是一个 web ...
- equalsignorecase 和equals的区别
equals方法来自于Object类equalsIgnoreCase方法来自String类equals对象参数是Object 用于比较两个对象是否相等equals在Object类中方法默然比较对象内存 ...
- Tornado 网站demo 三
模板 修改index.py #!/usr/bin/env Python # coding=utf-8 import tornado.web import methods.readdb as mrd c ...
- Flask 扩展 Flask-PyMongo
安装 pip install Flask-PyMongo 初始化Pymongo实例 from flask import Flask from flask.ext.pymongo import PyMo ...