Webpack 之 jQuery

最新推荐文章于 2025-05-27 11:24:33 发布

skyqinsc

最新推荐文章于 2025-05-27 11:24:33 发布

阅读量815

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端修养文章标签： webpack jquery npm ProvidePlugin

本文链接：https://blog.youkuaiyun.com/code_or_code/article/details/81294844

前端修养专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Webpack配置中使用ProvidePlugin插件来优雅地解决jQuery引用问题，避免因不同插件对jQuery的不同引用方式导致的build错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们运用Webpack前端打包工具以及Npm做包管理工具时候，如何运用引入jQuery插件呢？主要问题是各种插件用$, jquery，jQuery，windows.jQuery等，这些无法明确，最终导致build的时候出现 xxx is not defined的错误。

ProvidePlugin

先介绍个插件：自动加载模块。

功能:
new webpack.ProvidePlugin({identifier1: 'module1', /* ... */})
任何时候，当 identifier 被当作未赋值的变量时， module 就会自动被加载，并且 identifier 会被这个 module 输出的内容所赋值。

用法：

    // webpack.config.js 文件
    var webpack = require('webpack')

    module.exports = {
        // ...
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                jquery: "jquery",
                "window.jQuery": "jquery"
            })
        ]
    }