javascript - react - webpack-- inline

Webpack HMR nunca actualiza la página

Question

He estado jugando con diferentes características de Webpack, y poco a poco voy entendiendo las cosas.

Salida de consola típica:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] The following modules couldn''t be hot updated: (They would need a full reload!)
[HMR]  - 14
[HMR] Nothing hot updated.
[HMR] App is up to date.

Esto sucede sin importar qué parte del código se actualice, JS, Stylus, plantillas, etc. Todo pasa por transformaciones (Babel, Stylus, Handlebars), pero eso no debería importar.

Tengo un proyecto GitHub si alguien quiere ver el código fuente completo: https://github.com/SimenB/webpack-fun . npm install && npm start a ejecutarlo.

Webpack-config:

''use strict'';

var webpack = require(''webpack'');
var path = require(''path'');

var ExtractTextPlugin = require(''extract-text-webpack-plugin'');
var autoprefixer = require(''autoprefixer-core'');

module.exports = {
  context: path.resolve(''./src''),
  output: {
    filename: ''kj-[hash].js''
  },
  recordsOutputPath: path.resolve(''./records.json''),
  resolve: {
    alias: {
      ''common-assets'': path.resolve(''src'', ''common''),
      noop: path.resolve(''src'', ''common'', ''scripts'', ''noop'')
    }
  },
  module: {
    loaders: [
      { test: //.json$/, loader: ''json'' },
      { test: //.js$/, exclude: /node_modules/, loader: ''babel?optional=runtime'' },
      { test: //.styl$/, loader: ExtractTextPlugin.extract(''style'', ''css!postcss!stylus'') },
      { test: //.hbs$/, loader: ''handlebars'', query: { inlineRequires: ''//images//'' } },
      { test: //.png$/, loader: ''url?prefix=img/&limit=5000'' },
      { test: //.jpg$/, loader: ''url?prefix=img/&limit=5000'' },
      { test: //.woff(2)?$/, loader: ''url?prefix=font/&limit=5000'' },
      { test: //.eot$/, loader: ''file?prefix=font/'' },
      { test: //.ttf$/, loader: ''file?prefix=font/'' },
      { test: //.svg$/, loader: ''file?prefix=font/'' }
    ]
  },
  plugins: [
    new ExtractTextPlugin(''kj-[contenthash].css''),
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 20 })
  ],
  postcss: [ autoprefixer({ browsers: [ ''Chrome >= 33'', ''IE >= 8'' ] }) ]
};

Tarea Gulp

function devServer (project) {
  var webpackConfig = require(path.resolve(CONFIG_FILENAME));
  var webpackCore = webpack.core;

  var webpackOptions = {
    output: {
      path: path.resolve(''src'', project, ''build'')
    },
    debug: true,
    devtool: ''#source-map'',
    watchDelay: 200,
    entry: [
      ''webpack-dev-server/client?http://0.0.0.0:8080'',
      ''webpack/hot/only-dev-server'',
      ''./'' + project + ''/scripts/index.js''
    ],
    resolve: {
      alias: {
        ''dev-module'': ''common-assets/scripts/noop''
      }
    }
  };

  webpackConfig.plugins.push(new webpackCore.HotModuleReplacementPlugin());
  webpackConfig.plugins.push(new webpackCore.NoErrorsPlugin());
  webpackConfig.plugins.push(new HtmlWebpackPlugin({ template: ''src/common/index.html'', title: ''KJ'' }));

  // Start a webpack-dev-server
  var options = merge(webpackConfig, webpackOptions);

  var compiler = webpackCore(options);

  new WebpackDevServer(compiler, {
    contentBase: webpackOptions.output.path,
    hot: true,
    inline: true,
    proxy: {
      ''*'': ''http://localhost:7021/'' + project + ''-webapp''
    }
  }).listen(8080, ''localhost'', function (err) {
      if (err) {
        throw new gutil.PluginError(''webpack-dev-server'', err);
      }
      // Server listening
      gutil.log(''[webpack-dev-server]'', ''http://localhost:8080/webpack-dev-server/'');
    });
}

gulp.task(''webpack-dev-server:hpp'', function () {
  devServer(''hpp'');
});

Answer 1

No soy un experto en paquetes web, pero he tenido un problema similar. El tiempo de webpack/hot/only-dev-server solo actualiza los módulos que son reemplazables en caliente y no realiza una recarga completa. Si no le importan las recargas de página completa, puede reemplazarlo con el webpack/hot/dev-server .

Answer 2

Lo averigué. Me faltaba un module.hot.accept(); Estúpido error ... Brevemente mencionado en los documentos, pero debería haberlo visto ...

Answer 3

Tenía el mismo problema.

Alternativamente, uno puede inyectar el código necesario para habilitar HMR usando react-hot-loader.