时间：2016-11-03 10:50:54
地址：https://github.com/zhongxia245/blog/issues/45

webpack热更新

一、要求

1. 局部刷新修改的地方

二、如何配置

1、配置 webpack.config.js

下面最重要的是两个地方

• webpack入口文件，加上 'webpack-dev-server/client' 【必选】 , 'webpack/hot/only-dev-server', 【可选】

• loader加载器， js|jsx 需要加上 react-loader 在最前面

   {test: /\.(js|jsx)$/,loader: 'react-hot-loader!babel-loader',exclude: /node_modules/},

2、配置node的web server服务器

//热更新的关键一句app.use(require('webpack-hot-middleware')(compiler))

完整的配置

'use strict';
var path = require('path')
var webpack = require('webpack')module.exports = {devtool: 'source-map', cache: true,entry: {app: ['webpack-dev-server/client','webpack/hot/only-dev-server',path.join(__dirname, 'src/index')],common: path.join(__dirname, 'src/common')},output: {path: path.join(__dirname, 'static'),filename: '[name].bundle.js',chunkFilename: 'chunk/[chunkhash:8].chunk.js',publicPath: '/FileManage/static/'},plugins: [new webpack.DefinePlugin({__DEV__: String(true)}),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.CommonsChunkPlugin('vender.js')],module: {loaders: [{test: /\.(js|jsx)$/,loader: 'react-hot-loader!babel-loader',exclude: /node_modules/}, {test: /\.css$/,loader: 'style-loader!css-loader'}, {test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)(\?v=[\d\.]+)?$/,loader: 'file-loader?name=files/[hash:8].[ext]'}, {test: /\.json$/,loader: 'json-loader'}, {test: /\.less$/,loader: 'style!css!less'}]},resolve: {//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名extensions: ['', '.js', '.jsx'],root: [path.join(__dirname, '/src'),path.join(__dirname, '/'),path.join(__dirname, '../CommonComponent'),path.resolve(__dirname, '../BFD-UI')],alias: {Loading: 'common/components/Loading/index.js',}}
}

server.js

const express = require('express')
const debug = require('debug')('app:server')
const webpack = require('webpack')
const webpackConfig = require('../build/webpack.config')
const config = require('../config')const app = express()
const paths = config.utils_pathsapp.use(require('connect-history-api-fallback')())// ------------------------------------
// Apply Webpack HMR Middleware
// ------------------------------------
if (config.env === 'development') {const compiler = webpack(webpackConfig)app.use(require('webpack-dev-middleware')(compiler, {publicPath: webpackConfig.output.publicPath,contentBase: paths.client(),hot: true,quiet: config.compiler_quiet,noInfo: config.compiler_quiet,lazy: false,stats: config.compiler_stats}))app.use(require('webpack-hot-middleware')(compiler))app.use(express.static(paths.client('static')))
} else {app.use(express.static(paths.dist()))
}module.exports = app

The following modules couldn't be hot updated: (Full reload needed)

解决方案：参考原文地址 https://github.com/zhongxia245/blog/issues/45