反应热加载程序配置

时间:2015-09-04 06:36:05

标签: javascript reactjs webpack

我无法让热插件在我的项目中正常工作。刷新页面时没有任何更改。我按照这个链接看起来很简单,但我不确定它为什么不起作用:

http://gaearon.github.io/react-hot-loader/getstarted/

这是我项目的链接:

https://github.com/liondancer/ReviewWeb/blob/master/webpack.config.js

webpack.config.js:

@Test
public void Test2()
{
   driver.launchApp();
    System.out.println("this is second test in appium suite");
    driver.closeApp();
}

2 个答案:

答案 0 :(得分:1)

您似乎已将插件部分放在模块部分

在我的配置中

var webpack           = require('webpack');
var path              = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var argv              = require('minimist')(process.argv.slice(2));

var nodeModulesPath   = path.resolve(__dirname, 'node_modules');
var buildPath         = path.resolve(__dirname, 'public', 'build');
var appPath           = path.resolve(__dirname, 'src' );

var env               = argv.env || 'development';

var plugins = [

  new webpack.ProvidePlugin({
    $: 'jquery', jQuery: 'jquery', 'windows.jQuery': 'jquery'
  }),

  new webpack.DefinePlugin({
    ENV : JSON.stringify(env),
    NODE_ENV: JSON.stringify(env)
  }),

  new ExtractTextPlugin('bundle.css', {
    allChunks: true
  }),

  new webpack.HotModuleReplacementPlugin(),

  new webpack.NoErrorsPlugin()
];

var config = {

  entry: [
    'webpack-dev-server/client?http://127.0.0.1:3000',
    'webpack/hot/dev-server',
    path.resolve(appPath, 'app.jsx')
  ],

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  output: {
    path: buildPath,
    filename: 'bundle.js',
    publicPath: 'build/'
  },

  module: {
    loaders: [
      { test: /\.jsx?$/i, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') },
      { test: /\.css$/i,  loader: 'style!css' },
      { test: /\.less$/i, loader:ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')},
      { test: /\.jpe?g($|\?)|\.gif($|\?)|\.png($|\?)|\.svg($|\?)/i, loader: 'file-loader' },
      { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)/i, loader: 'file-loader', query:{ name:'[path][name].[ext]',context:'src/assets' }},
      { test: /\.ico($|\?)/i, loader: 'file-loader', query:{ name:'[path][name].[ext]', context:'src/assets' }},
      { test: /jquery\.js$/, loader: 'expose?$' },
      { test: /jquery\.js$/, loader: 'expose?jQuery' }
   ]
  },

  plugins: plugins,

  devtool: 'source-map'  

};

module.exports = config;

答案 1 :(得分:1)

尝试不在开发模式下使用ExtractTextPlugin,因为这个插件可能在热加载器上有一些问题,我不知道为什么,但是在我改为普通加载器而不使用ExtractTextPlugin之后,热加载器工作了。 / p>