[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","wumengzhuo","page",1,"limit",50,"total","id","33816","avatar_url","https://avatars1.githubusercontent.com/u/26699882?v=4","githubUsername","create_at","2018-06-20 01:12:40.788","score",25,"topic_count",0,"reply_count",5,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":49,"_50":51,"_25":52,"_53":54},"33812","author_id","32184","tab","share","content","# webpack构建React工程(第一季) \r\n[点击进入码云获取源代码](https://gitee.com/zhanghuanbiao/LearnFree/tree/master/react-webpack/react-build-with-webpack)\r\n\r\n**说明：阅读本文需要一定的前置知识：如 ES6的基本语法、Node+npm的基本用法、使用过webpck、对React的基本掌握等，不然很有可能看不懂该文！**\r\n\r\n## 一、webpack构建React开发环境基本用法（小白篇） \r\n1. 创建一个空文件夹，我这里命名为\"react-build-with-webpack\", `cd`进入该文件夹，使用`npm`初始化该文件夹：\r\n ```bash\r\n mkdir react-build-webpack\r\n\r\n cd react-build-webpack\r\n\r\n npm init\r\n ``` \r\n执行完上面的命令后，会产生一个`package.json`文件，这是npm的配置文件，相信了解过`node.js`的你，肯定知道它的作用 \r\n\r\n2. 下载安装必要的模块(我使用的是`cnpm`, 而且下载的模块都是最新的版本) \r\n react: \r\n ```bash\r\n cnpm i react react-dom -S\r\n ``` \r\n webpack: \r\n ```bash\r\n cnpm i webpack webpack-cli -D\r\n ```\r\n babel: \r\n ```bash\r\n cnpm i babel-loader babel-core babel-preset-env \\\r\n babel-preset-react -D \r\n ``` \r\n webpack plugin: \r\n ```base\r\n cnpm i html-webpack-plugin -D\r\n ```\r\n 必须安装好上面的模块，才能正常使用webpack管理和打包React代码哟！ \r\n\r\n 查看package.json,可以看到我们安装的模块： \r\n ```json\r\n \"dependencies\": {\r\n \"react\": \"^16.3.2\",\r\n \"react-dom\": \"^16.3.2\"\r\n },\r\n \"devDependencies\": {\r\n \"babel-core\": \"^6.26.3\",\r\n \"babel-loader\": \"^7.1.4\",\r\n \"babel-preset-env\": \"^1.7.0\",\r\n \"babel-preset-react\": \"^6.24.1\",\r\n \"html-webpack-plugin\": \"^3.2.0\",\r\n \"webpack\": \"^4.8.3\",\r\n \"webpack-cli\": \"^2.1.3\"\r\n }\r\n ``` \r\n3. 接下了我们来创建基本的目录结构 + 文件如下图： \r\n![目录结构+文件](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/1.jpg '目录结构+文件')\r\n * build目录放置webpack的配置文件: webpack.config.js\r\n ```javascript\r\n const path = require('path');\r\n const HTMLPlugin = require('html-webpack-plugin')\r\n\r\n const config = {\r\n mode: 'development', //开发模式\r\n entry: {\r\n app: path.resolve(__dirname, '../client/app.js') //入口文件\r\n },\r\n output: {\r\n path: path.resolve(__dirname, '../dist/'), // 输出路径\r\n filename: '[name].[hash:8].js', // 输出的文件名（带版本号）\r\n },\r\n // 模块管理\r\n module: {\r\n // 规则匹配，并使用loader处理\r\n rules: [\r\n // 使用babel-loader来处理js文件，及jsx文件\r\n {\r\n test: /\\.(js|jsx)$/i,\r\n loader: 'babel-loader',\r\n exclude: path.join(__dirname, '../node_modules')\r\n }\r\n ]\r\n },\r\n // webpack插件\r\n plugins: [\r\n // 引入模板文件插件\r\n new HTMLPlugin({\r\n template: path.resolve(__dirname, '../client/index.html')\r\n })\r\n ]\r\n };\r\n\r\n module.exports = config;\r\n ```\r\n * client目录放置客户端代码：\r\n * 入口文件：app.js \r\n ```javascript\r\n import React from 'react';\r\n import ReactDOM from 'react-dom';\r\n import App from './App.jsx';\r\n\r\n // 将App组件渲染到html页面\r\n ReactDOM.render(, document.getElementById('root'));\r\n ``` \r\n * App组件： app.jsx\r\n ```javascript\r\n import React from 'react';\r\n\r\n // 一个简单的function组件\r\n export default () => {\r\n return (\r\n

世界，你好！

\r\n )\r\n }\r\n ``` \r\n * 模板文件 index.html\r\n ```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n webpack-with-react\r\n \r\n \r\n

\r\n \r\n \r\n ```\r\n\r\n * babel配置文件： .babelrc\r\n ```json\r\n {\r\n \"presets\": [\r\n \"env\",\r\n \"react\"\r\n ]\r\n }\r\n ``` \r\n 综上，需要你创建的目录及文件大概就是这样了，不过，我们还需要在package.json中编写一条脚本命令，这样才能使用webpack进行打包 \r\n * 打开package.json, 在scripts中添加build命令：\r\n ```json\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\r\n \"build\": \"webpack --config build/webpack.config.js\"\r\n },\r\n ``` \r\n好了，万事俱备! 在react-build-with-webpack目录下，执行下面命令，便会在当前目录下生成dist文件夹: \r\n```bash\r\nnpm run build\r\n``` \r\n![dist文件夹](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/2.jpg 'dist文件夹') \r\n\r\n浏览器打开该文件夹下的index.html \r\n\r\n![浏览器查看](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/3.jpg) \r\n\r\n通过webpack打包的react应用，便可以在浏览器正常显示了 \r\n\r\n## 二、配合webpack-dev-server + hot-module-replacement (进阶篇) \r\n\r\n### 一、webpack-dev-server的配置及使用 \r\n\r\n1. **首先**删除（小白篇）生成的dist目录,因为使用webpack-dev-server时，会优先使用磁盘中的dist目录，但是每次webpack-dev-server更新的打包文件版本号不一样，否则会出错\r\n\r\n2. 下载 webpack-dev-server 模块：\r\n```bash\r\ncnpm i webpack-dev-server -D\r\n``` \r\n3. 以及下载可以在执行package.json脚本时给node.js传入环境变量的模块 cross-env\r\n\r\n ```bash\r\n cnpm i cross-env -D\r\n ``` \r\n\r\n4. 在package.json执行脚本中加入一条命令 devc(开启客户端调试的命令)： \r\n ```bash\r\n\"scripts\": {\r\n \"build\": \"webpack --config build/webpack.config.js\",\r\n \"devc\": \"cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js\"\r\n},\r\n ```\r\n\r\n5. 编写build/webpack.config.js文件： \r\n ```bash\r\nconst path = require('path');\r\nconst HTMLPlugin = require('html-webpack-plugin')\r\n// 是否为开发环境\r\nconst isDev = process.env.NODE_ENV === 'development'\r\n\r\nconst config = {\r\n mode: isDev ? 'development' : 'production', //开发模式\r\n entry: {\r\n app: path.resolve(__dirname, '../client/app.js') //入口文件\r\n },\r\n output: {\r\n path: path.resolve(__dirname, '../dist/'), // 输出路径\r\n filename: '[name].[hash:8].js' // 输出的文件名（带版本号）\r\n },\r\n // 模块管理\r\n module: {\r\n // 规则匹配，并使用loader处理\r\n rules: [\r\n // 使用babel-loader来处理js文件，及jsx文件\r\n {\r\n test: /\\.(js|jsx)$/i,\r\n loader: 'babel-loader',\r\n exclude: path.join(__dirname, '../node_modules')\r\n }\r\n ]\r\n },\r\n // webpack插件\r\n plugins: [\r\n // 引入模板文件插件\r\n new HTMLPlugin({\r\n template: path.resolve(__dirname, '../client/index.html')\r\n })\r\n ]\r\n};\r\n\r\nif (isDev) {\r\n // webpack-dev-server配置\r\n config.devServer = {\r\n host: '0.0.0.0', // 域名\r\n port: 8000, // 端口\r\n contentBase: path.resolve(__dirname, '../dist/'), //静态文件路径\r\n overlay: true // 开启错误调试\r\n }\r\n}\r\n\r\nmodule.exports = config;\r\n ``` \r\n\r\n6. 完成上面的几步之后，webpack-dev-server基本配置完毕，接下来运行客户端调试环境： \r\n\r\n ```bash\r\n npm run devc\r\n ``` \r\n 运行成功后，访问 localhost:8000 就可以看到我们的react调试页面了！ \r\n\r\n 接着你可以把client/App.jsx中的“世界，你好！”改成别的文字，然后保存，你会发现，localhost:8000页面会自动刷新，显示你更改后的效果；这就是我们使用webpack-dev-server的真正原因 \r\n\r\n 当然，光使用webpack-dev-server还不够，因为每次更新代码都会刷新页面，浏览器会重新渲染页面，缺点不言而喻。我们应该利用react的虚拟DOM机制，局部刷新我们更改的部分，而不是整个页面进行刷新，接下来我们使用webpack的hot-module-replacement解决这个问题 \r\n\r\n### 二、hot-module-replacement的使用及配置 \r\n\r\n1. 需配合react的babel插件`react-hot-loader`,所以需要先安装一下 \r\n ```bash\r\n cnpm i react-hot-loader -D\r\n ``` \r\n2. react-hot-loader配置三部曲，这里我贴上官网的介绍： [点击进入官网查看](https://github.com/gaearon/react-hot-loader 'react-hot-loader官网')\r\n![react-hot-loader](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/4.jpg 'react-hot-loader') \r\n\r\n3. 根据什么的三部曲进行配置：\r\n 1. 编辑.babelrc 文件\r\n ```json\r\n {\r\n \"presets\": [\r\n \"env\",\r\n \"react\"\r\n ],\r\n \"plugins\": [\"react-hot-loader/babel\"]\r\n }\r\n ``` \r\n 2. 编辑client/App.jsx\r\n ```javascript\r\n import React from 'react';\r\n import { hot } from 'react-hot-loader';\r\n\r\n // 一个简单的function组件\r\n const App = () =>

佛曰：我执，是痛苦的根源！

\r\n\r\n export default hot(module)(App)\r\n ``` \r\n 3. 更改build/webpack.config.js\r\n\r\n ```javascript\r\n const path = require('path');\r\n const HTMLPlugin = require('html-webpack-plugin')\r\n // 是否为开发环境\r\n const isDev = process.env.NODE_ENV === 'development'\r\n const Webpack = require('webpack')\r\n\r\n const config = {\r\n mode: isDev ? 'development' : 'production', //开发模式\r\n entry: {\r\n app: path.resolve(__dirname, '../client/app.js') //入口文件\r\n },\r\n output: {\r\n path: path.resolve(__dirname, '../dist/'), // 输出路径\r\n filename: '[name].[hash:8].js' // 输出的文件名（带版本号）\r\n },\r\n // 模块管理\r\n module: {\r\n // 规则匹配，并使用loader处理\r\n rules: [\r\n // 使用babel-loader来处理js文件，及jsx文件\r\n {\r\n test: /\\.(js|jsx)$/i,\r\n loader: 'babel-loader',\r\n exclude: path.join(__dirname, '../node_modules')\r\n }\r\n ]\r\n },\r\n // webpack插件\r\n plugins: [\r\n // 引入模板文件插件\r\n new HTMLPlugin({\r\n template: path.resolve(__dirname, '../client/index.html')\r\n })\r\n ]\r\n };\r\n\r\n if (isDev) {\r\n // webpack-dev-server配置\r\n config.devServer = {\r\n host: '0.0.0.0', // 域名\r\n port: 8000, // 端口\r\n contentBase: path.resolve(__dirname, '../dist/'), //静态文件路径\r\n overlay: true, // 开启错误调试\r\n hot: true //是否开启hot-module-replacement\r\n };\r\n // 配置hot-module-replacement\r\n config.plugins.push(new Webpack.HotModuleReplacementPlugin())\r\n }\r\n\r\n module.exports = config;\r\n ```\r\n完成上面的配置后，再次运行：\r\n```bash\r\nnpm run devc\r\n```\r\n\r\n访问：localhost:8000, 然后你再去更改client/App.jsx文件，你会发现，页面没有刷新，但你的更改却可以实时显示，这是一件很神奇的事，不是么！ \r\n\r\n\r\n## 三、线上环境的React服务端渲染（大师篇） \r\n\r\n一、首先，我先解释一下，为什么需要服务端渲染： \r\n1. 体验不好，使用React编写的代码，需要先下载到客户端，然后通过js的渲染，才能显示到页面，在渲染完成以前，客户端得到的只是一个空白； \r\n![空白html](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/5.jpg)\r\n2. seo不友好，因为是一个空白的html文档，浏览器的搜索引擎爬虫根本不能获取到网页的内容 \r\n\r\n二、开始我们的服务端渲染之旅 \r\n1. 下载编写服务端代码必要的安装包 \r\n```bash\r\ncnpm i ejs express -S\r\n``` \r\n\r\n```bash\r\ncnpm i rimraf ejs-compiled-loader -D\r\n```\r\n2. 创建server目录 + server.js，用于我们编写服务端代码： \r\n![server目录](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/6.jpg) \r\n\r\n3. 需要编写一个服务端渲染入口client/server-app.js,以及服务端入口的webpack配置文件build/webpack.server.js, 服务端渲染需要用到的ejs模板文件client/server.ejs \r\n![服务端文件](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/7.jpg) \r\n\r\n 1. server-app.js\r\n ```javascript\r\n import React from 'react';\r\n import App from './App.jsx';\r\n\r\n export default \r\n ``` \r\n\r\n 2. 打包用于服务端渲染的webpack配置：build/webpack.server.js \r\n ```javascript\r\n const path = require('path');\r\n // 是否为开发环境\r\n const isDev = process.env.NODE_ENV === 'development'\r\n\r\n const config = {\r\n mode: isDev ? 'development' : 'production', //开发模式\r\n target: 'node', // node运行环境\r\n entry: {\r\n app: path.resolve(__dirname, '../client/server-app.js') //入口文件\r\n },\r\n output: {\r\n path: path.resolve(__dirname, '../dist/'), // 输出路径\r\n filename: 'server-app.js', // 输出的文件名\r\n libraryTarget: 'commonjs2' // 使用最新commonjs模块化方案\r\n },\r\n // 模块管理\r\n module: {\r\n // 规则匹配，并使用loader处理\r\n rules: [\r\n // 使用babel-loader来处理js文件，及jsx文件\r\n {\r\n test: /\\.(js|jsx)$/i,\r\n loader: 'babel-loader',\r\n exclude: path.join(__dirname, '../node_modules')\r\n }\r\n ]\r\n }\r\n };\r\n module.exports = config;\r\n ```\r\n 注意：什么的配置： \r\n * target: \"node\"\r\n * libaryTarget: \"commonjs2\" \r\n 这两个配置是关键，这样打包处理的代码才能遵循commonjs规范，才能在node.js端运行 \r\n\r\n 3. client/server.ejs \r\n ```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n webpack-with-react\r\n \r\n \r\n

<%%- appString %>

\r\n \r\n \r\n ``` \r\n 你可能已经发现，什么的ejs语法很奇怪，解释一下，因为webpack在打包时，ejs会执行，会了防止报错，必须使用什么的写法即：`<%%- appString %>`, 在webpack编译时，需要相应的loader进行解析，下面我们就来配置该loader: `ejs-compiled-loader`: \r\n\r\n 4. 配置生成服务端渲染需要用到的模板： build/webpack.config.js, 在plugins中新增如下：\r\n\r\n ```javascript\r\n plugins: [\r\n ... \r\n // 服务端渲染模板\r\n new HTMLPlugin({\r\n template: '!!ejs-compiled-loader!' + path.resolve(__dirname, '../client/server.ejs'),\r\n filename: 'server.ejs'\r\n })\r\n ]\r\n ``` \r\n\r\n 5. 完成以上步骤之后，我们还有配置一下package.json的执行脚本部分，修改后为： \r\n ```json\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\r\n \"buildc\": \"webpack --config build/webpack.config.js\",\r\n \"builds\": \"webpack --config build/webpack.server.js\",\r\n \"build\": \"rimraf dist && npm run buildc && npm run builds\",\r\n \"devc\": \"cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js\"\r\n },\r\n ``` \r\n\r\n 6. 接下来，我们就可以打包服务端渲染需要的代码了： \r\n ```bash\r\n npm run build\r\n ```\r\n\r\n 执行之后，生成dist目录： \r\n ![dist目录](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/8.jpg) \r\n\r\n 7. 好了，下面才是我们进行服务端渲染的代码server/server.js \r\n ```javascript\r\n const express = require('express');\r\n const ejs = require('ejs');\r\n const path = require('path');\r\n const fs = require('fs');\r\n const ReactSSR = require('react-dom/server');\r\n const serverApp = require('../dist/server-app').default;\r\n\r\n const app = express();\r\n const template = fs.readFileSync(path.join(__dirname, '../dist/server.ejs'), 'utf-8');\r\n app.get('*', (req, res) => {\r\n const appString = ReactSSR.renderToString(serverApp);\r\n const html = ejs.render(template, {appString});\r\n res.send(html);\r\n });\r\n\r\n app.listen(3000, () => {\r\n console.log('server is listening on 3000');\r\n })\r\n ```\r\n 熟悉node.js以及express基础的同学，应该很容易理解上面的代码\r\n\r\n 8. 在package.json中再编写一条启动命令： \r\n ```json\r\n \"start\": \"node server/server.js\"\r\n ``` \r\n\r\n 9. 执行上面的脚本，便可开启express服务，访问： localhost:3000, 及返回服务端渲染好的html代码了 \r\n ![start](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/9.jpg) \r\n ![localhost:3000](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/10.jpg) \r\n ![源代码](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/11.jpg) \r\n\r\n 10. 不过，高兴还太早了，因为报错了！ \r\n ![报错](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/12.jpg) \r\n 因为，我们的server端代码响应的任意请求都是渲染出来的html代码： \r\n ```javascript\r\n app.get('*', (req, res) => {\r\n var appString = ReactSSR.renderToString(serverApp);\r\n var html = ejs.render(template, {appString});\r\n res.send(html);\r\n });\r\n ```\r\n 这是不行的，应该有所区分，所以还需要更改一下配置，和修改一下代码：\r\n\r\n * build/webpack.config.js的output部分： \r\n ```javascript\r\n output: {\r\n path: path.resolve(__dirname, '../dist/'), // 输出路径\r\n filename: '[name].[hash:8].js', // 输出的文件名（带版本号）\r\n publicPath: '/public/'\r\n },\r\n ``` \r\n * build/webpack.config.js的devServer部分：\r\n\r\n ```javascript\r\n // webpack-dev-server配置\r\n config.devServer = {\r\n host: '0.0.0.0', // 域名\r\n port: 8000, // 端口\r\n contentBase: path.resolve(__dirname, '../dist/'), //静态文件路径\r\n overlay: true, // 开启错误调试\r\n hot: true, //是否开启hot-module-replacement\r\n publicPath: '/public/',\r\n historyApiFallback: { // 404默认返回\r\n index: '/public/index.html'\r\n }\r\n };\r\n ``` \r\n\r\n * server/server.js 需要引导一下静态资源目录： \r\n ```javascript\r\n const app = express();\r\n app.use('/public', express.static(path.join(__dirname, '../dist/')));\r\n ``` \r\n\r\n * 重新打包，并开启服务端渲染 \r\n ```bash\r\n npm run build\r\n ```\r\n\r\n ```bash\r\n npm start\r\n ```\r\n\r\n * 启动成功后，再次访问localhost: 3000\r\n 没有报错： \r\n ![没有报错](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/13.jpg) \r\n 正确引用静态资源文件 \r\n ![静态资源文件app.js](https://gitee.com/zhanghuanbiao/LearnFree/raw/master/react-webpack/img/14.jpg) \r\n\r\n至此，简单的服务端渲染就讲完了，更复杂的服务端渲染，会在以后的新教程中讲解！接下了还需要构建在开发环境下的服务端渲染，请接着继续往下看\r\n\r\n## 四、开发环境的服务端渲染（超神篇） \r\n如果我们想看服务端渲染的效果，根据上面的介绍，那么就必须使用webpack打包,然后启动服务器，重新修改代码，又要重新打包，重启服务器，这样也太浪费时间了，打包是很费cpu和内存，也很费时费力的，接下来，我们就需要来构建一个开发环境下，实时更新的服务端渲染； \r\n\r\n一、安装必要的依赖： \r\n\r\n```bash\r\ncnpm i http-proxy-middleware memory-fs nodemon -D\r\n```\r\n\r\n```bash\r\ncnpm i axios -S\r\n``` \r\n\r\n二、修改server/server.js,对开发环境和线上环境进行区分 \r\n\r\nserver/server.js: \r\n```javascript\r\nconst express = require('express');\r\nconst ejs = require('ejs');\r\nconst path = require('path');\r\nconst fs = require('fs');\r\nconst ReactSSR = require('react-dom/server');\r\nvar isDev = process.env.NODE_ENV === 'development';\r\nconst app = express();\r\n\r\nif (!isDev) { //线上环境\r\n const serverApp = require('../dist/server-app').default;\r\n app.use('/public', express.static(path.join(__dirname, '../dist/')));\r\n const template = fs.readFileSync(path.join(__dirname, '../dist/server.ejs'), 'utf-8');\r\n app.get('*', (req, res) => {\r\n var appString = ReactSSR.renderToString(serverApp);\r\n var html = ejs.render(template, {appString});\r\n res.send(html);\r\n });\r\n} else { // 开发环境\r\n const devServer = require('./utils/dev-server')\r\n devServer(app);\r\n}\r\n\r\napp.listen(3000, () => {\r\n console.log('server is listening on 3000');\r\n})\r\n``` \r\n\r\n三、开发环境的服务端代码： server/utils/dev-server.js \r\n\r\n```javascript\r\nconst proxy = require('http-proxy-middleware'); // 服务端代理插件\r\nconst webpack = require('webpack');\r\nconst config = require('../../build/webpack.server');\r\nconst axios = require('axios'); // 异步请求插件\r\nconst MemoryFS = require('memory-fs'); // 存取内存数据流插件\r\nconst mfs = new MemoryFS();\r\nconst path = require('path');\r\nconst ReactSSR = require('react-dom/server');\r\nconst ejs = require('ejs');\r\n\r\n// 获取模板，在开发环境，没有打包好的dist,所以模板的获取要到，webpack-dev-server服务获取\r\nconst getTemplate = () => {\r\n return new Promise((resolve, reject) => {\r\n axios.get('http://localhost:8000/public/server.ejs')\r\n .then((response) => {\r\n resolve(response.data)\r\n })\r\n .catch(reject);\r\n });\r\n}\r\n\r\n// commonjs模块\r\nconst NativeModule = require('module');\r\n// 虚拟机\r\nconst vm = require('vm');\r\n// 把模块字符串，转化为可运行的模块\r\nconst getModuleFromString = (bundleStr, filename) => {\r\n // 设置一个假模块\r\n const m = {exports: {}};\r\n // 把模块字符串包装为commonjs调用形式\r\n const wrapper = NativeModule.wrap(bundleStr, filename);\r\n // 把字符串变成可执行脚本\r\n const script = new vm.Script(wrapper, {\r\n displayErrors: true,\r\n filename\r\n });\r\n const result = script.runInThisContext();\r\n result.call(m.exports, m.exports, require, m);\r\n return m;\r\n}\r\n\r\n// 编译webpack\r\nconst compiler = webpack(config);\r\n// 把webpack磁盘形式的存取操作，改为内存形式的存取操作\r\ncompiler.outputFileSystem = mfs;\r\n\r\n// 需要进行服务端渲染的App入口\r\nlet serverApp;\r\n\r\n// webpack监听入口文件，以及入口文件引用的其他模块的变化\r\ncompiler.watch({}, (err, stats) => {\r\n if (err) throw err;\r\n\r\n stats = stats.toJson();\r\n // 打印webpack监听过程的报错\r\n stats.errors.forEach(err => console.error(err));\r\n // 打印webpack监听过程的警告\r\n stats.warnings.forEach(err => console.warn(err));\r\n // 内存中入口App路径\r\n const bundlePath = path.join(config.output.path, config.output.filename);\r\n const bundleStr = mfs.readFileSync(bundlePath, 'utf-8');\r\n const m = getModuleFromString(bundle, config.output.filename);\r\n serverApp = m.exports.default;\r\n})\r\n\r\n\r\nmodule.exports = (app) => {\r\n // /public开头的path,代理到webpack-dev-server服务\r\n app.use('/public', proxy({\r\n target: 'http://localhost:8000'\r\n }));\r\n\r\n app.get('*', (req, res, next) => {\r\n getTemplate()\r\n .then((template) => {\r\n if (!serverApp) {\r\n return res.send('serverApp还没编译完成，请稍后刷新！');\r\n }\r\n const appString = ReactSSR.renderToString(serverApp);\r\n const html = ejs.render(template, {appString});\r\n res.send(html);\r\n })\r\n .catch(next);\r\n })\r\n}\r\n``` \r\n\r\n四、使用nodemon启动开发环境服务，这样服务端代码有更改，服务端会自动刷新重启，编写nodemon.json配置文件： \r\n\r\n```json\r\n{\r\n \"restartable\": \"rs\",\r\n \"ignore\": [\r\n \".git/\",\r\n \"dist/\",\r\n \"node_modules/\",\r\n \"client/\",\r\n \"build/\"\r\n ],\r\n \"ext\": \"js\",\r\n \"verbose\": true,\r\n \"env\": {\r\n \"NODE_ENV\": \"development\"\r\n }\r\n}\r\n``` \r\n\r\n五、还需要在package.json中，添加一条脚本来启动开发环境的服务端渲染： \r\n\r\n```json\r\n\"devs\": \"nodemon server/server.js\",\r\n```\r\n\r\n做完上面五步，执行以下步骤，就能够启动开发环境的服务端渲染了： \r\n\r\n如果有dist,将其删除\r\n```bash\r\nrm -rf dist\r\n```\r\n启动webpack-dev-server\r\n```bash\r\nnpm run devc\r\n```\r\n启动开发环境服务端渲染\r\n```bash\r\nnpm run devs\r\n```\r\n\r\n访问：localhost:8000 \r\n访问：localhost:3000 \r\n\r\n修改client/App.jsx, 你会发现上面打开的两个网页，同时自动显示修改后的结果； \r\n\r\n不过，在localhost:3000的页面，打开控制台，你会发现有一个警告： \r\n\r\n```bash\r\nreact-dom.development.js:5585 Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.\r\n``` \r\n\r\n意思是，如果使用服务端渲染需要用`ReactDOM.hydrate()`，我的思路是根据端口号来判断，在客户端渲染的端口号为：8000，在服务服务端渲染的端口号为： 3000 \r\n\r\n因此修改client/app.js为： \r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './App.jsx';\r\n\r\nvar reactDOMRender = window.location.port == '8000' ? ReactDOM.render :ReactDOM.hydrate; \r\n// 将App组件渲染到html页面\r\nreactDOMRender(, document.getElementById('root'));\r\n```\r\n\r\n**至此，简单的开发环境渲染就讲完了，以后的教程还会继续讲解更复杂的开发环境服务端渲染**","title","webpack构建React工程(第一季)","last_reply_at","2018-07-18 09:54:35.019","good","top",3,"visit_count",4399,"2018-05-22 14:50:49.479","author",{"_13":55,"_22":56},"zhb333","https://avatars2.githubusercontent.com/u/26917599?v=4"]

世界，你好！

佛曰： 我执，是痛苦的根源！

佛曰：我执，是痛苦的根源！