自己搭的脚手架,因为一些原因没使用webpack-dev-server,目录结构如下
|-src
|-page1
|-index.html
|-index.js
|-other.js
|-index.scss
然后写着写着发现一个问题,因为写的是多页面形式的工程,每个目录下有一个html模板,又没有实际在生产中使用,所以写的内容比较简单,都是自己写一些测试的东西,但是这个结构如果要用react-router,就麻烦了,因为针对目前这个结构,是直接使用了express的static中间件来对生成的文件进行返回,webpack打包出的文件生成在dist文件夹下面,然后启动这样一个node文件来监听
const express = require("express");
const app2 = express();
const port2 = 3002;
app2.use(express.static('project/'));
app2.listen(port2);
访问的时候,一般是输入localhost:3002/page1.html这样来访问的,但是用到react-router的时候,不能直接在浏览器里输入路径了,比如我输入localhost:3002/page1.html/main/api,静态文件代理就失效了,这个事情摸索了挺久,但是结果一说特别简单,就是起两个监听,一个监听html,一个监听js和css,webpack打包的时候,给output配置一个publicPath,配置成一个和html不一样的端口,比如html是在3003上监听,js和css在3002上监听,生成的html模板如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app"></div>
// 注意下面这个script的src的路径
<script type="text/javascript" src="http://localhost:3002/dist/0708.js"></script>
</body>
</html>
node文件如下,
const express = require("express");
const fs = require("fs");
// 监听html
const app = express();
const port = 3003;
app.get("*", (req, res) => {
const url = req.originalUrl;
// 下面这行里readFileSync的路径可以自己改
res.send(fs.readFileSync(`project/dist/${url.split('/')[1]}.html`).toString());
});
app.listen(port);
// 监听js和css文件
const app2 = express();
const port2 = 3002;
app2.use(express.static('project'));
app2.listen(port2);
踩坑
这个摸索的过程里,还遇到了一些坑,
1.react-router 3和4的不同用法
react-router 3是这样写的,basename是为了上面的html文件名可以不用在route里面写了,注意react-router版本是3的话,history这个包的版本也要是3
import { Route, Router, useRouterHistory } from 'react-router';
import { createHistory } from 'history';
const browserHistory = useRouterHistory(createHistory)({
basename: '/app',
});
ReactDOM.render( (
<Router history={browserHistory}>
<Route path="/detail1" component={DetailPage} />
<Route path="/detail2" component={DetailPage2} />
</Router>
), document.getElementById('root'));
react-router 4是这样写的,注意react-router 4要安装的不是react-router,而是react-router-dom
import { Route, BrowserRouter } from 'react-router-dom';
const ddd = (
<BrowserRouter basename='/0708/main'>
<Route path="/detail1" component={DetailPage} />
<Route path="/detail2" component={DetailPage2} />
</BrowserRouter>
);
ReactDOM.render(ddd, document.getElementById("app"));
2.报错
如果写错了ReactDOM.render里面的document.getElementById的元素名称,会报这个,但是这个错,让人摸不着头脑Uncaught Invariant Violation: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
,不排除有别的情况会报这个,但是元素id写错了也是一种可能性
有兴趣可以看看我写的hellowebpack,相关代码都在里面
https://github.com/vzhufeng/helloWebpack