webpack实现热更新（实施同步刷新）(2)

var config = require("./webpack.config.js"); var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); config.entry.app.unshift("webpack-dev-server/client?:8099/"); var compiler = webpack(config); var server = new WebpackDevServer(compiler, { publicPath: config.output.publicPath, stats: { colors: true } }); server.listen(8099);

这里注意下内容，

我的app.js是这么配置的，很简单，

app.js文件

import React from 'react' import { render } from 'react-dom' import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router' alert("AAA");

安装完成webpack命令之后，

运行 npm start 命令 ，即可实现本地实施同步开发！

接下来就编写你的代码即可！

全部代码在这里：在这里

解决方案二：（推荐使用）

操作步骤：

1、安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下：

（1）npm config set registry "" 

（2）npm config list  可以查看配置  

2.安装完nodejs之后,打开终端,执行命令:

npm install webpack -g //-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装,执行命令:

3、使用 npm init 初始化，生成 package.json 文件：执行命令:

npm init 自定义创建package.json  
npm init -yes 可以创建默认的package.json  

现在我们的项目已经创建好了,接下来我们来添加依赖包及插件

（1） 局部安装Webpack,执行命令：

npm install webpack --save-dev

（2）安装react,–save 命令用于将包添加至 package.json 文件,执行命令：

复制代码 代码如下:

npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader html-webpack-plugin --save-dev

 

（3） 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。

复制代码 代码如下:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev 

（4）安装自动刷新热更新服务，安装webpack-dev-server执行命令：

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

（5）在package.json文件中为scripts添加,方便使用开启服务命令:

"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }

package.json全部文件附上：

{ "name": "yubai8", "version": "1.1.1", "main": "index.js", "dependencies": {}, "devDependencies": { "html-webpack-plugin": "^2.26.0", "webpack-dev-server": "^1.16.2" }, "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }, "author": "", "license": "ISC", "keywords": [], "description": "" }

这里有一点提醒大家，package.json中name不能跟我们的模块和项目文件目录同名！

安装完命令之后，创建webpack的配置文件：webpack.config.js文件

webpack.config.js文件配置如下：