javascript - 개념 - 바벨 로더




Webpack HMR은 페이지를 업데이트하지 않습니다. (2)

웹팩 전문가는 아니지만 비슷한 문제가 있습니다. webpack/hot/only-dev-server 런타임은 핫 대체가 가능하고 완전히 다시로드하지 않는 모듈 만 업데이트합니다. 전체 페이지 webpack/hot/dev-server 고침에 신경 쓰지 않는다면 webpack/hot/dev-server 바꿀 수 있습니다.

나는 Webpack의 다른 기능들로 어지럽게 흩어져 왔고, 나는 천천히 사물을 이해하고있다.

일반적인 콘솔 출력 :

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

이것은 코드 조각이 JS, Stylus, 템플릿 등 어떤 것들이 업데이트 되더라도 발생합니다. 모든 것은 변형 (Babel, Stylus, Handlebars)을 거치지 만 중요하지 않습니다.

누구든지 전체 소스 코드를 보려면 GitHub 프로젝트가 있습니다. https://github.com/SimenB/webpack-fun . npm install && npm start 을 실행하여 실행하십시오.

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' ] }) ]
};

꿀꺽 마는 일

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');
});

그것을 알아 냈다. module.hot.accept(); 가 누락되었습니다 module.hot.accept(); 어리석은 오류 ... 간단히 문서에서 언급했지만, 나는 그것을 보았어야했다 ...





webpack