美文网首页
【WEBPACK】代码热更新和出现的错误处理

【WEBPACK】代码热更新和出现的错误处理

作者: izhongxia | 来源:发表于2016-11-03 11:06 被阅读1847次

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

    相关文章

      网友评论

          本文标题:【WEBPACK】代码热更新和出现的错误处理

          本文链接:https://www.haomeiwen.com/subject/lkbbuttx.html