基于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'
　　　　}
　　　 表示：当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

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

　　文章原创，转载请注明出处，谢谢！