【20161103】webpack 热更新

[zhongxia245]

时间：2016-11-03 10:50:54
地址：#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_paths

app.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

[zhongxia245]

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

The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

出现原因：由于 webpack.config.js 的 js/jsx 的loader 没有设置 react-hot , 参照上面完整配置的代码

[zhongxia245]

webpack rebuild.... 时间比较久， 这个问题还得研究研究，看有啥简单的解决方案

[xueyou2000]

const config = require('../config')
这个文件又在哪呢, 能不能发全