webpack4 引入第三方插件，比如jQuery（内有html打包教程）

最新推荐文章于 2024-06-11 19:31:59 发布

一天不学习感觉像头猪

最新推荐文章于 2024-06-11 19:31:59 发布

阅读量1.6k

点赞数

分类专栏： webpack 文章标签： webpack4

本文链接：https://blog.youkuaiyun.com/qq_29116547/article/details/88979719

版权

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在webpack4.29.6版本中引入第三方库jQuery的三种方法，包括通过配置文件暴露全局变量、直接在JS中引用以及处理本地jQuery引用问题。此外，还讲解了如何配置webpack进行HTML文件的打包，包括安装相关插件和配置webpack.config.js。

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

webpack4.29.6版本

方法一：

首先，您需要安装expose-loader:

$ npm install expose-loader --save-dev

例如，假设您希望将jQuery公开为全局调用$:

02.js

require("expose-loader?$!jquery");

方法二：

直接在js头部引用

require('../jq/jquery-1.3.1.js');

第三种方法：

无法引用本地jquery

01.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Custom template</title>
<body>

<script src="https://cdn.bootcss.com/jquery/1.3.1/jquery.js"></script>
</body>
</html>

webpack.config.js

 externals : {
        'jquery' : 'window.jQuery'
    }

01.js

const $ = require("jquery");
$("#content").html("<h1>hello world</h1>");

顺便说一下HTML的打包吧：

安装

npm install --save-dev html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
....//省略
},

plugins:[
new HtmlWebpackPlugin({
            template: './src/view/index.html', //指定要打包的html路径和文件名
            filename:'view/index.html', //指定输出路径和文件名
            inject:true,
            hash:true
        })
]