webpack中引用jQuery的四種方式
阿新 • • 發佈:2020-12-22
import
webpack中是根據一個入口檔案開始收集依賴。
import $ from 'jquery'
但是一個專案中通常有很多個地方都用到了jQuery,每個模組都要這樣的一行程式碼
那麼如何解決這個問題了。
webpack外掛ProvidePlugin
webpack內部有個外掛,可以幫助到我們,(webpack自己的外掛),用了這個外掛,我們所有檔案都不用再手動的匯入了。
const webpack = require('webpack')
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }), new HtmlWebpackPlugin() ]
webpack.ProvidePlugin這個外掛了需要傳入一個物件作為引數,key表示變數名,value表示模組名。
缺點:這個$不能放在window上
expose-loader
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: require.resolve('jquery'), use: { loader: 'expose-loader', options: '$' } } ] },
require.resolve表示在node_modules中查詢模組的路徑。
import $ from 'jquery'表示在node_modules引入這個模組。
引用的模組路徑完全匹配,將使用loader來處理,所有你必須在入口檔案中引用這個模組
options表示模組的別名
只要引用一次就會暴露在全域性上,通過(window.$看看)
除了入口檔案引入一次,其他模組就不需要引入了。
CDN
一般我們會選擇CDN引入檔案,不想打包jQuery,那麼如何處理呢?
載入CSN檔案的loader
add-asset-html-cdn-webpack-plugin
使用
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const AddAssetHtmlCdnWebpackPlugin = require('add-asset-html-cdn-webpack-plugin'); module.exports = { new AddAssetHtmlCdnWebpackPlugin(true, { 'jquery': 'http://code.jquery.com/jquery-git.min.js' }) ] };
引入了CDN就不要內建打包jQuery了
標識成外部檔案,webpack配置增加一個這樣的配置,新增這樣的內容
externals: { 'query': '$' }
key表示包名,value表示變數,就是忽略這樣import $ from 'jquery'這樣的程式碼。
這就是webpack引入包的幾種方式!