一、解决什么问题

  1、如何引入第三方库,如jquery等

二、引入jquery方法

  1、下载jquery.min.js放到assets/lib下面

  2、安装copy-webpack-plugin,将已经存在的单个文件或整个目录复制到构建目录。命令:npm install copy-webpack-plugin --save-dev

  3、在webpack.config.js进行配置,打包的时候把lib目录拷贝到构件目录,配置如下:

         //拷贝不进行打包的第三方库
new copyWebpackPlugin([{
from: path.resolve(__dirname, "../src/assets/lib"),
to: './assets/lib',
ignore: ['.*']
}]),

  4、引入jquery.min.js

    在html页面底部,body结束标签里面引入<script src="/assets/lib/jquery.min.js"></script>,因为htmlWebpackPlugin的配置属性inject设置了打包的文件

    放入到body元素的底部。

    如果放到body结束标签下面会发生什么情况,如下:

    

    为什么会这样,看js加载顺序:

    

    我们在index.js引用了jquery,这时jquery还没有引入,自然就未定义哈。

    当把jquery引用放到body结束标签里面,效果如下:

    

    jquery会优先被引入,也就不会出现这个问题了,这样我们就可以愉快的使用jquery了。

  5、externals使用

    externals:防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)

    在webpack.config.js增加配置

    externals: {
    jquery: 'window.jQuery'
    }
    表示:当require的参数是jquery的时候,使用winow.jQuery这个全局变量引用它,这种最简洁的externals配置方式为默认的global模式,就是在window上挂一个全局变量,然后直接可以使用这个变量
   在js文件中引用
    import $ from "jquery"或const $ = require("jquery");这两种方式都可以,es6的import和cmd的方式都可以,引用就可以正常使用了
 
  6、注意
    1、不在externals里面进行配置,不在js文件中引入,jquery也可以正常使用,因为在index.html通过script引用了jquery,浏览器加载时已经把jquery挂载到了window
    2、自定义一个js文件,挂到window上,在index.html通过script引用后就可使用
            3、externals是决定的是以哪种模式去加载所引入的额外的包,支持:global、commonjs、commonjs2、amd,具体请看官方文档:https://www.webpackjs.com/guides/author-libraries/
    4、第三方库互相依赖的问题,在.html文件中调整引用顺序即可
 
 

  源码地址:https://github.com/James-14/webpack4_multi_page_demo

  写的不对之处请大家批评指正~~~~!!!!!!

  文章原创,转载请注明出处,谢谢!

    
 

    

  

基于webpack实现多html页面开发框架七 引入第三方库如jquery的更多相关文章

  1. 基于webpack实现多html页面开发框架一 准备工作

    本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...

  2. 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

    本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题      1.CSS打包      2.CSS处理浏览器兼容      3.SASS支持      4.CSS分离成单独的文件 ...

  3. 基于webpack实现多html页面开发框架六 提取公共代码

    一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...

  4. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  5. 基于webpack实现多html页面开发框架四 自动写入多入口,自动插入多个htmlWebpackPlugin插件

    一.解决什么问题      1.手写页面多入口,一个一个输入太麻烦,通过代码实现      2.手写多个htmlWebpackPlugin插件太麻烦,通过代码实现 二.多入口代码实现 //读取所有.j ...

  6. 基于webpack实现多html页面开发框架三 图片等文件路径替换、并输出到打包目录

    一.解决什么问题      1.图片路径替换.并输出到打包目录      2.输出目录清理 二.需要安装的包 file-loader:html.css中图片路径替换,图片输出到打包目录:命令:npm ...

  7. 基于webpack实现多html页面开发框架八 html引入图片打包和公共页面模块复用

    一.解决什么问题 1.html中img引入的图片地址没有被替换,找不到图片 2.html公共部分复用问题,如头部.底部.浮动层等 二.html中img引入图片问题解决 1.在index.html插入i ...

  8. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  9. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

随机推荐

  1. Ubuntu 18.04.3 LTS Virtualbox提示“Kernel driver not installed (rc=-1908)”问题修复一例

    前两天Ubuntu升级了,重启后启动virtualbox保存 从错误报告上反映出来的问题原因是因为某些内核驱动程序没有经过编译,所以Virtualbox无法正常运行.事实上,在Ubuntu上处理这个问 ...

  2. springcloud-Eureka组件

    一.简介 Eureka 是 Netflix 开发的服务发现框架,本身是一个基于 REST 的服务,主要用于定位运行在 AWS 域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringC ...

  3. AQS系列(二)- ReentrantLock的释放锁

    前言 在AQS系列(一)中我们一起看了ReentrantLock加锁的过程,今天我们看释放锁,看看老Lea那冷峻的思维是如何在代码中笔走龙蛇的. 正文 追踪unlock方法: public void ...

  4. UIContainerView纯代码实现及原理介绍

    UIContainerView纯代码实现及原理介绍 1.1-在StoryBoard中使用UIContainerView 1.2-纯代码使用UIContainerView 1.3-UIContainer ...

  5. iOS开发之UIWebView

    转自:http://www.cnblogs.com/zhuqil/archive/2011/07/28/2119923.html UIWebView是iOS sdk中一个最常用的控件.是内置的浏览器控 ...

  6. 2019 牛客国庆集训派对day1-C Distinct Substrings(exkmp+概率)

    链接:https://ac.nowcoder.com/acm/contest/1099/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...

  7. CodeForces1000A-Light It Up

    B. Light It Up time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. k近邻聚类简介

    简介 在所有机器学习算法中,k近邻(K-Nearest Neighbors,KNN)相对是比较简单的. 尽管它很简单,但事实证明它在某些任务中非常有效,甚至更好.它可以用于分类和回归问题! 然而,它更 ...

  9. windows程序设计00_HelloWorld

    #include <windows.h> int WINAPI WinMain (HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR sz ...

  10. 改变SecureCRT的背景颜色

    1.在使用secureCRT客户端时,可以连接服务器,默认为白色底. 2.要进行对把底色的白色改为黑色的底色,右击的窗口的位置. 3.下拉菜单中点击 Session Options 4.点击Appea ...