webpack dev server热加载模式,修改js页面会刷新,而修改sass文件会实现热加载无刷新

webpack配置文件如下

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

module.exports = {
  entry: {
    'index': './src/js/index'
  },
  output: {
    path: './static/',
    filename: '[name].js',
    publicPath: '/static/'
  },
  module: {
    preLoaders: [
      {test: /\.jsx?$/, loader: 'eslint-loader', exclude: /node_modules/}
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loader: 'style!css!sass?sourceMap'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          //'image?{bypassOnDebug: true, progressive:true, optimizationLevel: 3, pngquant:{quality: "65-80"}}',
          'url?limit=10000&name=images/[name].[hash:8].[ext]'
        ]
      },
      {
        test: /\.(woff|eot|ttf)$/i,
        loader: 'url?limit=10000&name=fonts/[name].[ext]'
      }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, './src/sass'), path.resolve(__dirname, './node_modules')]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

启动webpack-dev-server(webpack-dev-server --port=9002 --inline --colors --hot)后,修改sass文件会实现热替换,但修改jsx文件就会重新刷新页面
请问配置有什么问题吗?

阅读 14.9k
2 个回答

试试加个react-hot-loader

{
  test: /\.jsx?$/,
  loader: 'react-hot!babel',
  exclude: /node_modules/
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏