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

来源：互联网发布：mac osx yosemite.vdi 编辑：程序博客网时间：2024/06/05 23:57

前面我们搭建了一个基础的框架（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

阅读全文

0 0

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

1、构建本地服务

2、热替换

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