基于webpack实现多html页面开发框架七 引入第三方库如jquery
一、解决什么问题
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' }import $ from "jquery"或const $ = require("jquery");这两种方式都可以,es6的import和cmd的方式都可以,引用就可以正常使用了 6、注意 1、不在
表示:当require的参数是jquery的时候,使用winow.jQuery这个全局变量引用它,这种最简洁的externals配置方式为默认的global模式,就是在window上挂一个全局变量,然后直接可以使用这个变量
在js文件中引用
externals里面进行配置,不在js文件中引入,jquery也可以正常使用,因为在index.html通过script引用了jquery,浏览器加载时已经把jquery挂载到了window2、自定义一个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页面开发框架八 html引入图片打包和公共页面模块复用
- 【Python成长之路】基于Flask框架开发web -- 了解html,并实现简单的表格管理平台(3)
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面
- 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML
- Ubuntu 14.04 Web 程序开发(4)基于JQuery+Ajax+Json+Servlet实现PUT GET
- 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
- 基于MVC+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
- (转)基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出
- webpack+vue 实现多页面开发
- 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作