基於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

　　寫的不對之處請大家批評指正~~~~!!!!!! 

 

　　文章原創，轉載請注明出處，謝謝！