本文详细介绍在Node.js环境下使用Webpack实现开发时热更新（HMR）的配置方法。通过安装webpack-dev-server及相关加载器，结合babel转码与React插件，实现代码修改后浏览器自动同步刷新。文章提供两种解决方案，重点推荐基于webpack-dev-server的完整配置流程，包含package.json、webpack.config.js及启动脚本的具体设置，帮助开发者提升前端开发效率。
Webpack 热更新概述
本文介绍了webpack实现热更新（实时同步刷新）的配置方法，旨在帮助开发者优化前端开发流程，提升编码效率。
方案一：手动配置环境依赖
方案一：手动配置环境依赖
要实现热更新功能，首先需要安装一系列Node.js命令行工具。如果嫌配置繁琐，可以直接参考后文的解决方案二，该方案相对更为简便。
1、webpack命令安装
npm install webpack -g
npm init
npm init -yes //可以创建默认的package.json
npm install webpack --save-dev
npm install path fs html-webpack-plugin extract-text-webpack-plugin autoprefixer webpack-dev-server --save-dev
npm install css-loader style-loader --save-dev//样式文件，我们需要两种loader，css-loader 和 style－loader，css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。
了解webpack的基本使用命令即可，此处不做深入展开。
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
webpack --watch //监听变动并自动打包
webpack -p//压缩混淆脚本，这个非常非常重要！
webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了
其中 -p 参数至关重要。例如，一个未压缩时大小为 700kb 的文件，在使用 -p 参数压缩后，体积可直接降至 180kb。这主要是因为样式代码中每句独占一行，导致未压缩脚本体积庞大。
2、webpack 支持es6转码安装
//安装转码规则
npm install babel-core babel-loader babel-preset-es2015 babel-preset-React babel-preset-stage-0 –save-dev3、webpack + es6 + react 安装命令：
npm install react react-dom react-router react-hot-loader css-loader jsx-loader --save-dev
//react-hot-loader 是一款非常好用的 React 热插拔的加载插件，通过它可以实现修改-运行同步的效果，配合 webpack-dev-server 使用更佳！
附注：
若遇到css加载失败或报错（如 ERROR Module not found: Error: Cannot resolve module ‘style' in D:\workspace\HBuilder React_Probject\webPack-demo1\webpck\app），
请执行以下两个命令进行修复：
$ npm i style-loader -D
$ npm i css-loader -D
只要按上述命令完成安装，即可实现基础功能。接下来附上具体的实现代码，需要包含以下几个关键文件：
1、package.json文件
在package.json文件中为scripts字段添加配置，以便使用便捷命令：
最终的package.json文件结构如下
"scripts": {
"start": "node dev-serve.js"
},最终的package.json文件如下：
{
"name": "yubai",
"description": "Utility components for react js",
"version": "1.1.1",
"keywords": [
"react-component",
"react-utils",
"react utility"
],
"scripts": {
"start": "node dev-serve.js"
},
"src": "src",
"test": "test",
"dist": "dist",
"mainInput": "ReactUtils",
"mainOutput": "main",
"dependencies": {
"async": "^0.9.0",
"backbone": "^1.1.2",
"bootstrap": "^3.2.0",
"es6-promise": "^1.0.0",
"flux": "^2.0.1",
"font-awesome": "^4.2.0",
"humps": "0.0.1",
"jquery": "^2.1.1",
"jquery.ui.widget": "^1.10.3",
"json5": "^0.2.0",
"less": "^1.7.5",
"less-loader": "^0.7.7",
"lodash": "^2.4.1",
"moment": "^2.8.3",
"normalizr": "^0.1.2",
"q": "^1.0.1",
"react-hot-loader": "^0.4.5",
"rimraf": "^2.2.8",
"routes": "^1.2.0",
"superagent": "^0.18.2",
"codemirror": "3.20.0"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/sahusoftcom/react-utils.git"
},
"devDependencies": {
"autoprefixer": "^6.6.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.6.12",
"extract-text-webpack-plugin": "^1.0.1",
"fs": "0.0.1-security",
"gulp": "^3.8.8",
"gulp-concat": "^2.4.0",
"gulp-jshint": "^1.8.4",
"gulp-rename": "^1.2.0",
"gulp-sass": "^0.7.3",
"gulp-uglify": "^1.0.1",
"gulp-util": "^3.0.1",
"html-webpack-plugin": "^2.26.0",
"jshint-loader": "~0.6.0",
"jsx-loader": "^0.11.2",
"karma": "~0.10.9",
"karma-chrome-launcher": "~0.1.2",
"karma-firefox-launcher": "~0.1.3",
"karma-jasmine": "~0.1.5",
"karma-phantomjs-launcher": "~0.1.1",
"karma-script-launcher": "~0.1.0",
"karma-webpack-plugin": "~1.0.0",
"path": "^0.12.7",
"postcss-loader": "^1.2.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-hot-loader": "^0.4.5",
"react-router": "^3.0.0",
"style-loader": "^0.6.5",
"url-loader": "~0.5.4",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"bugs": {
"url": "https://github.com/sahusoftcom/react-utils/issues"
},
"homepage": "https://github.com/sahusoftcom/react-utils#readme",
"main": "app.js",
"author": "yubai",
"license": "ISC"
}
以上代码请注意标红部分的关键配置。
2、webpack.config.js文件（webpack主配置文件）
var webpack = require('webpack'),
path = require('path'),
fs = require('fs'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: ["./app.js"]
},
output: { //输出目录
path: __dirname + './__build__',
publicPath: "",
filename: 'shared.js',
chunkFilename: '[name].[chunkhash:3].min.js',
},
module: { //在配置文件里添加JSON loader
loaders: [{
test: /\.js$/,
exclude: /^node_modules$/,
loader: 'babel'
}, {
test: /\.css$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
}, {
test: /\.less$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])
}, {
test: /\.scss$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass'])
}, {
test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
exclude: /^node_modules$/,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /\.(png|jpg|gif)$/,
exclude: /^node_modules$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
//注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图
}, {
test: /\.jsx$/,
exclude: /^node_modules$/,
loaders: ['jsx', 'babel']
}]
},
resolve: {
extensions: ['', '.js', '.json']
},
postcss: [
require('autoprefixer') //调用autoprefixer插件,加入各个浏览器的前缀
],
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new ExtractTextPlugin('[name]-[hash:3].css'), //css随机数
new webpack.HotModuleReplacementPlugin(), //热加载插件
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.NoErrorsPlugin()
]
};
3、webpack服务文件：dev-serve.js
var config = require("./webpack.config.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost: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 "http://registry.npm.taobao.org"
（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文件配置如下：
var path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app.js')],
output: {
path: path.resolve(__dirname, './__build__'),
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 8099
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};
上面第五行 ‘./app.js' 是你的js入口文件
安装完成之后运行命令
1、根目录下执行命令，其中一个：
npm run build 线上目录
npm run dev 开发目录
2.浏览器直接访问:http://localhost:8099/index.html
解决方案二：代码链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。