資訊專欄INFORMATION COLUMN
摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步系列教程十二處理第三方庫原文地址。因為正式項目中，由于需要的依賴過多，掛載到對象的庫，很容易發(fā)生命名沖突問題。會先從安裝的包中查找是否有符合的庫。證明在中使用的和都成功指向了庫。
教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步《webpack4 系列教程(十二)：處理第三方 JavaScript 庫》原文地址?；蛘邅砦业男≌究锤鄡?nèi)容：godbmw.com0. 課程介紹和資料
>>>本節(jié)課源碼
>>>所有課程源碼
本節(jié)課的代碼目錄如下：
本節(jié)課的package.json內(nèi)容如下：
{
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.16.1"
}
}
1. 如何使用和管理第三方JS庫？
項目做大之后，開發(fā)者會更多專注在業(yè)務(wù)邏輯上，其他方面則盡力使用第三方JS庫來實現(xiàn)。
由于js變化實在太快，所以出現(xiàn)了多種引入和管理第三方庫的方法，常用的有 3 中：
CDN：標(biāo)簽引入即可
npm 包管理： 目前最常用和最推薦的方法
本地js文件：一些庫由于歷史原因，沒有提供es6版本，需要手動下載，放入項目目錄中，再手動引入。
針對第一種和第二種方法，各有優(yōu)劣，有興趣可以看這篇：《CDN 使用心得：加速雙刃劍》
針對第三種方法，如果沒有webpack，則需要手動引入import或者require來加載文件；但是，webpack提供了alias的配置，配合webpack.ProvidePlugin這款插件，可以跳過手動入，直接使用！
2. 編寫入口文件如項目目錄圖片所展示的，我們下載了jquery.min.js，放到了項目中。同時，我們也通過npm安裝了jquery。
為了盡可能模仿生產(chǎn)環(huán)境，app.js中使用了$來調(diào)用 jq，還使用了jQuery來調(diào)用 jq。
因為正式項目中，由于需要的依賴過多，掛載到window對象的庫，很容易發(fā)生命名沖突問題。此時，就需要重命名庫。例如：$就被換成了jQuery。
// app.js
$("div").addClass("new");
jQuery("div").addClass("old");
// 運(yùn)行webpack后
// 瀏覽器打開 index.html, 查看 div 標(biāo)簽的 class
3. 編寫配置文件
webpack.ProvidePlugin參數(shù)是鍵值對形式，鍵就是我們項目中使用的變量名，值就是鍵所指向的庫。
webpack.ProvidePlugin會先從npm安裝的包中查找是否有符合的庫。
如果webpack配置了resolve.alias選項（理解成“別名”），那么webpack.ProvidePlugin就會順著這條鏈一直找下去。
// webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
resolve: {
alias: {
jQuery$: path.resolve(__dirname, "src/vendor/jquery.min.js")
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", // npm
jQuery: "jQuery" // 本地Js文件
})
]
};
4. 結(jié)果分析和驗證
老規(guī)矩，根絕上面配置，先編寫一下index.html：
Document
命令行運(yùn)行webpack進(jìn)行項目打包：
在 Chrome 中打開index.html。如下圖所示， 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98256.html標(biāo)簽已經(jīng)被添加上了old和new兩個樣式類。證明在app.js中使用的$和jQuery都成功指向了jquery庫。
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個人技術(shù)博客。所以我花費了個多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計模式）、面試刷題（偏前...
摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續(xù)更新。個人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時，最近內(nèi)容請看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發(fā)者可以輕松地實現(xiàn)加密代碼、多平臺兼容。而最重要的...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步 原文地址 有空就來看看個人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步 原文地址 有空就來看看個人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：文件配置如下多頁面應(yīng)用注意屬性其次打包業(yè)務(wù)中公共代碼首先打包中的文件著重來看配置。個人網(wǎng)站原文鏈接系列教程三多頁面解決方案提取公共代碼 這節(jié)課講解webpack4打包多頁面應(yīng)用過程中的提取公共代碼部分。相比于webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...
閱讀 1387·2021-09-30 09:55
閱讀 1914·2021-08-27 13:10
閱讀 2260·2019-08-29 17:22
閱讀 1310·2019-08-29 16:30
閱讀 3476·2019-08-26 18:37
閱讀 2362·2019-08-26 11:47
閱讀 1173·2019-08-23 14:44
閱讀 1749·2019-08-23 13:46
