(19/24) webpack實戰技巧：推薦使用的第三方類庫打包方法

在平常的開發中，總避免不了引入第三方的框架，好比經常使用的JQuery，此節咱們來學習一下如何優雅並正確的用webpack引入第三方庫。

這裏咱們以第三方框架JQuery爲例：

一、在入口文件中引入

1.1  安裝JQuery

npm install --save jquery

因爲Jquery最終要在生產環境中使用，因此要使用–save進行安裝。

1.2 在入口文件（entry.js）中引入

安裝好後，咱們使用import引入到entry.js文件中。

import $ from 'jquery';

由於jquery包是直接安裝到node_modules，這裏能夠直接經過包名就能夠引入成功。（系統會自動爲咱們查找）

1.3 使用三方框架（jquery）

引入好後咱們就能夠在entry.js裏使用jquery，進行測試引入是否成功：

$('#title').html('Hello Jquery');

 

1.4 打包+啓動服務

jquery代碼寫完以後，咱們打包，而後啓動服務，咱們能夠看到代碼順利運行，這說明咱們引用的JQuery庫成功了。

 打包：

npm run dev

啓動服務：

npm run server

結果爲：

 

 二、在webpack.config.js文件的plugins屬性中引入

這種不須要你在入口文件中引入，而是webpack給你做了全局引入。這裏使用的插件是ProvidePlugin。

ProvidePlugin是一個webpack自帶的插件，由於ProvidePlugin是webpack自帶的插件，因此要先再webpack.config.js中引入webpack。

2.1 引入 

webpack.config.js:

 

const  webpack = require('webpack');

 

注意：在webpack.config.js裏引入必須使用require，不然會報錯的。

2.1 配置plugins模塊

plugins:[ new webpack.ProvidePlugin({ $:"jquery" }) ],

配置好後，就能夠在入口文件中使用了，而不用再次引入了。這是一種全局的引入。

2.3 使用三方框架

此時的入口文件變爲：

 

 2.4 打包+啓動服務

該步驟與1.4相同，參考上述1.4便可。