您的位置：首页 > Web前端 > React

WEB前端使用 webpack + reack 搭建框架 02 本地服务 与 热替换（react-hot-loader）

2017-07-03 14:42 1171 查看
前面我们搭建了一个基础的框架（WEB前端使用 webpack + reack 搭建框架 01 基础框架），但是更新代码后需要手动刷新比较麻烦，我们想实现自动更新。这就用到了webpack-dev-server，可以来构建一个本地服务器。

1、构建本地服务

首先我们要下载组件webpack-dev-server

npm install --save-dev webpack-dev-server


然后在配置文件 webpack.config.js 中增加 devServer 配置

module.exports = {
devtool: 'eval-source-map', //配置生成Source Maps，选择合适的选项
entry: __dirname + "/app/js/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/public/js", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port: 8888 //端口号
}
}


然后在packge.json中增加启动命令：

"dev": "webpack-dev-server --colors --progress"


colors 是使输出内容为彩色

progerss 是显示打包进度

这时整个 packge.json 看起来是这样的：

{
"name": "react-learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --colors --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}


进入项目目录，打开命令窗口执行命令启动服务：

npm run dev


最后打开浏览器访问：

http://localhost:8888/index.html

可以显示出内容则证明配置正确。

然后更新 test.js 组件的代码，页面会自动刷新。然而现实中并没有自动更新，研究了一番终于找到了问题。

PS: 我自己第一次做测试的时候是成功刷新了的，但是那个时候我的public文件夹里没有js文件夹，页面和js都是在public文件夹中的。

结论是：你要在html中引用这么个文件

devServer.contentBase+output.filename 文件，在本例中就是

<script src="bundle.js"></script>


原因可以查看：

webpack-dev-server不自动刷新

(我将output.filename改为main.js 然后引用 main.js ，测试发现也是可以的。所以我认为会自动生成上面所说的规则的文件。）

我们修改index.html 如下

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
<!-- <script src="js/bundle.js"></script> -->
<script src="bundle.js"></script>
</body>
</html>


刷新页面，然后再次修改 test.js组件的内容 浏览器就会自动刷新页面了。

2、热替换

上面对页面进行了刷新，但这依然不是最好的体验，我们需要页面不刷新然后动态的更新页面并且记住组件的state。

首先下载依赖包

npm install --save-dev react-hot-loader@next


在入口文件main.js中增加：

if (module.hot) {
module.hot.accept('./test.js', () => {
const NextRootContainer = require('./test.js').default;
render(<NextRootContainer />, document.getElementById('root'));
})
}


这时我们的整个 main.js 是这样的：

import React from "react";
import {
render
} from "react-dom";
import Test from './test.js';

render(<Test />, document.getElementById('root'));

if (module.hot) {
module.hot.accept('./test.js', () => {
const NextRootContainer = require('./test.js').default;
render(<NextRootContainer />, document.getElementById('root'));
})
}


修改package.json，将dev的 命令修改为：

"dev": "webpack-dev-server --colors --progress --hot"


这时我们的整个 package.json 是这样的：

{
"name": "react-learn1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --colors --progress --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^3.0.0-beta.7",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}


修改 webpack.config.js 的入口：

entry: [
'react-hot-loader/patch',
__dirname + "/app/js/main.js"
]


修改 webpack.config.js 的babel loader：

loaders: [{
test: /\.js$/,
exclude: /node_modules/,
// loader: 'babel-loader'
loaders: ['react-hot-loader/webpack', 'babel-loader']
}]


这时我们的整个 webpack.config.js 是这样的：

module.exports = {
devtool: 'eval-source-map', //配置生成Source Maps，选择合适的选项
entry: [
'react-hot-loader/patch',
__dirname + "/app/js/main.js"
], //已多次提及的唯一入口文件
output: {
path: __dirname + "/public/js", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
// loader: 'babel-loader'
loaders: ['react-hot-loader/webpack', 'babel-loader']
}]
},
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true, //
port: 8888 //端口号
}
}


然后执行命令：

npm run dev


启动本地服务，然后打开网页http://localhost:8888/index.html。

修改组件后就实现了动态刷新，而且是记住组件state的哦。

借鉴资料：

http://www.jianshu.com/p/42e11515c10f

http://www.cnblogs.com/llauser/p/6795428.html

http://gaearon.github.io/react-hot-loader/getstarted
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web web前端 webpack react
相关文章推荐
新的分享
章节导航