使用Webpack集成Foundation 6.4时，$(document).foundation()报错求助

看起来你遇到的问题是Foundation没有正确挂载到jQuery对象上，这通常是Webpack模块作用域和加载顺序导致的。让我们一步步修复这个问题：

问题根源 #

你当前用script-loader直接在entry里加载jQuery和Foundation，虽然配置了ProvidePlugin，但Foundation可能无法正确识别Webpack提供的jQuery实例，或者加载顺序导致Foundation初始化时jQuery还没准备好。另外，直接在entry里用script-loader的方式也不符合Webpack模块导入的最佳实践。

解决方案 #

1. 调整Webpack配置 #

修改webpack.config.js，移除entry里的script-loader加载项，同时完善ProvidePlugin确保Foundation能找到全局的jQuery，添加CSS处理规则：

const webpack = require('webpack');
module.exports = {
    entry: ['./src/index'],
    mode: "production",
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    performance: {
        hints: false
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' // 关键：让Foundation能找到全局的window.jQuery
        })
    ],
    module: {
        rules: [
            {
                test: /\.jsx$|\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['react','es2015'],
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] // 单独配置CSS加载规则
            }
        ]
    }
};

2. 修改index.js的导入和初始化逻辑 #

调整导入顺序，确保先加载jQuery再加载Foundation，用标准的模块导入方式替代require('style-loader!css-loader!...')：

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore,compose} from 'redux';
import reducer from './app/reducers/reducerCombine';
import MainContainer from "./app/container/MainContainer";

// 先导入jQuery，再导入Foundation
import $ from 'jquery';
import 'foundation-sites'; // Foundation会自动挂载到jQuery实例上
import 'foundation-sites/dist/css/foundation.min.css'; // 标准CSS导入

$(document).ready(() => {
  // 确保DOM完全加载后再初始化Foundation
  $(document).foundation();
});

const store= createStore(reducer,compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
ReactDOM.render(
    <Provider store={store}>
        <MainContainer/>
    </Provider>,
    document.getElementById('root'));

为什么这样改？ #

• 移除script-loader：Webpack的模块系统会自动处理依赖顺序，用标准import能确保Foundation加载时jQuery已经存在，且能正确附加到jQuery对象上。
• 添加window.jQuery到ProvidePlugin：Foundation内部会检查全局的window.jQuery对象，这一步能让它在Webpack的模块环境下找到正确的jQuery实例。
• 标准化CSS导入：把CSS加载规则移到Webpack配置里，让代码更清晰，也便于后续扩展（比如添加postcss-loader等）。

额外检查 #

确保你已经安装了所有必要的依赖包，如果没有的话，执行：

npm install jquery foundation-sites style-loader css-loader babel-loader @babel/core babel-preset-react babel-preset-es2015 webpack webpack-cli --save-dev

内容的提问来源于stack exchange，提问作者Voi Mập