WEB前端使用 webpack + reack 搭建框架 02 本地服务 与 热替换（react-hot-loader）
前面我们搭建了一个基础的框架（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 如下
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
head>
<body>
<div id="root">div>
<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(这时我们的整个 main.js 是这样的：
import React from "react";
import {
render
} from "react-dom";
import Test from './test.js';
render(修改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