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

发布于 2022-09-02 01:33:40 字数 1278 浏览 8 评论 0

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文件就会重新刷新页面
请问配置有什么问题吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

安穩 2022-09-09 01:33:40

试试加个react-hot-loader

{
  test: /\.jsx?$/,
  loader: 'react-hot!babel',
  exclude: /node_modules/
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文