Skip to content

【20161103】webpack 热更新 #45

Closed
@zhongxia245

Description

@zhongxia245
Owner

时间: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

Activity

zhongxia245

zhongxia245 commented on Nov 3, 2016

@zhongxia245
OwnerAuthor

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

zhongxia245 commented on Nov 3, 2016

@zhongxia245
OwnerAuthor

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

xueyou2000

xueyou2000 commented on Nov 29, 2016

@xueyou2000

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @zhongxia245@xueyou2000

        Issue actions

          【20161103】webpack 热更新 · Issue #45 · zhongxia245/blog