[WEBPACK] 코드 핫 업데이트 및 오류 처리

시간: 2016-11-03 10:50:54 주소:https://github.com/zhongxia245/blog/issues/45
웹팩 핫 업데이트
요구

부분적으로 수정된 곳

2. 어떻게 설정
1. 웹팩을 설정합니다.config.js
그다음에 제일 중요한 게 두 군데예요.

웹팩 입구 파일, '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의 웹 서버 서버 설정

//        
 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

The following modules couldn't be hot updated: (Full reload needed)
솔루션:원문 주소 참조https://github.com/zhongxia245/blog/issues/45