如何在Webpack 5+React SSR环境中使用jQuery插件Flexslider

• 先把ProvidePlugin配置到位，别漏了window.jQuery的映射——Flexslider很多时候是读取全局window上的jQuery对象。在webpack.config.js里这么写：

  const webpack = require('webpack');
  
  module.exports = {
    // 保留其他原有配置
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  };
  

• 要是ProvidePlugin还不生效，就配上expose-loader的Webpack 5正确写法（别用旧版配置）：

  module.exports = {
    // 保留其他原有配置
    module: {
      rules: [
        {
          test: require.resolve('jquery'),
          loader: 'expose-loader',
          options: {
            exposes: ['$', 'jQuery']
          }
        }
      ]
    }
  };
  

• 调整导入顺序，确保jQuery先被加载到全局再导入Flexslider，比如在入口文件（如index.js）里：

  import 'jquery';
  import 'flexslider';
  

  或者手动把jQuery挂到window上再导入：

  import $ from 'jquery';
  window.jQuery = $;
  import 'flexslider';
  

• 最后检查Flexslider版本，有些老版本和Webpack 5的模块解析逻辑不兼容，试试升级到最新兼容版本。

内容的提问来源于stack exchange，提问作者Nikhil Goswami