【webpack】中引用jQuery的三種方式

webpack中是根據一個入口文件開始收集依賴。

 

但是一個項目中通常有很多個地方都用到了jQuery，每個模塊都要這樣的一行代碼

import $ from 'jquery'

 

那么如何解決這個問題了。

 

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引入包的幾種方式，你有get到了嗎？