webpack快速入門——實戰技巧:優雅打包第三方類庫


 

 

下面說兩種方法:

一、

1.引入jQuery,首先安裝:

cnpm install --save jquery

 

 2.安裝好后,在我們的entry.js中引入:

import $ from 'jquery'

3.引入完成后,我們在entry.js中寫入jquery的語法 進行測試:

4.使用 npm run server 效果如下:

二、

1.用plugin引入

如果你覺的上面的方法和webpack沒什么關系,只是普通的引入,webpack只是負責了一下打包,這樣並沒有全局感。那再學習一種在webapck.config.js中配置的方法,這種不需要你在入口文件中引入,而是webpack給你作了全局引入。這個插件就是ProvidePlugin。

ProvidePlugin是一個webpack自帶的插件,所以首先我們引入webpack:

 

const webpack = require('webpack');

 

2.配置:

 

new webpack.ProvidePlugin({
    $:'jquery'
}),

 

 

配置好后,就可以在你的入口文件中使用了,而不用再次引入了。這是一種全局的引入!

 

 

前端必學內容:webpack(模塊打包器

webpack3 學習內容,點擊即可到達

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件:入口和出口,多入口、多出口配置 

(4).webpack快速入門——配置文件:服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮,打包

(7).webpack快速入門——插件配置:HTML文件的發布

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階,Less文件的打包和分離

(12).webpack快速入門——CSS進階:SASS文件的打包和分離

(13).webpack快速入門——CSS進階:自動處理CSS3前綴

(14).webpack快速入門——CSS進階:消除未使用的CSS

(15).webpack快速入門——給webpack增加babel支持

(16).webpack快速入門——打包后如何調試

(17).webpack快速入門——實戰技巧:開發和生產並行設置

(18).webpack快速入門——實戰技巧:webpack模塊化配置

(19).webpack快速入門——實戰技巧:優雅打包第三方類庫

(20).webpack快速入門——實戰技巧:watch的正確使用方法,webpack自動打包

(21).webpack快速入門——實戰技巧:webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

如果我的內容對你有幫助,歡迎打賞


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM