webpack无法解析'jquery'答案

【问题标题】：webpack Can't resolve 'jquery'webpack无法解析'jquery'
【发布时间】：2017-07-26 14:41:51
【问题描述】：

您好，我是 Webpack 的新手，目前我正在将此工具添加到我的项目中，在捆绑 (webpack ...) 依赖于 jquery 的库期间，我收到如下错误：

错误：无法解析“C:\some_folder”中的“jquery”

我在互联网上浏览了类似的帖子，但没有任何积极影响。人们建议使用不同的方法，例如： - 解决.别名 - 插件ProvidePlugin

我使用 webpack 3.3.0，在我的项目中，jQuery 在供应商捆绑脚本之前通过 script 标签 以正常方式加载。大多数供应商库（包括 jQuery）不在 node_modules 文件夹中。

webpack.config.js：

const webpack = require('webpack');
const { resolve } = require('path');

module.exports = env => {
    return {
        context: resolve('src'),
        entry: {
            comp: './start.comp.js',
            culture: './start.culture.js',
            strategy: './start.strategy.js',
            vendors: './start.vendors.js'
        },
        output: {
            path: resolve('dist'),
            publicPath: '/dist/',
            filename: 'bundle.[name].js'
        },
        devtool: env.dev ? 'eval' : 'source-map'
    };
};

最后一个条目 jquery.placeholder.min.js 有问题

require('./../assets/vendor/typeahead.js');
require('./../assets/vendor/hogan-2.0.0.js');
require('./../assets/vendor/swfobject.js');
require('expose-loader?_!./../assets/vendor/underscore-min.js');
require('expose-loader?FastClick!./../assets/vendor/fastclick.js');
require('expose-loader?AOS!./../assets/vendor/aos.js');
require('./../assets/vendor/jquery.placeholder.min.js');

【问题讨论】：

不建议在 webpack 的 script 标签中使用 library，因为 webpack 应该解决所有依赖关系。

标签： jquery webpack

【解决方案1】：

问题

由于 jquery.placholder.min.js 使用 UMD 作为其加载策略，它通过 require 认识到它是必需的 - 并尝试以相同的方式要求 jQuery：

"object"==typeof module&&module.exports?require("jquery"):jQuery

Webpack 看到 require("jquery") 并尝试捆绑 jQuery 库（在 node_modules 中不存在）。

解决方案

解决方案是将 jQuery 添加为 external 在您的 webpack.config.js 中：

{
  ...
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
  }
}

当一个模块被标记为 external 时，Webpack 知道不捆绑它，而是使用全局变量。

【讨论】：

对我来说，这允许构建完成，但会在前端 Uncaught ReferenceError: jQuery is not defined 上导致此错误，我在 webpack.config.js 中包含 jQuery：plugins: [new UglifyJsPlugin(), new webpack.ProvidePlugin({$: "./jquery-3.3.1", jQuery: "./jquery-3.3.1"}) ]
太棒了，这行得通！非常感谢。所以它只使用通过 package.json 安装和引用的版本

【解决方案2】：

我在 react 中工作，我发现当我导入 react-bootstrap 组件时，有时组件来自 bootstarp的 {Buttons} >;然后我得到了这个错误。但我通过调用从 bootstrap 到 react-bootstrap 的路径来解决它；

检查您的自动导入调用并尝试更改它。这对我有用。

【讨论】：