暴露全局的变量

直接使用 cdn 的方式（常用）

  • add-asset-html-cdn-webpack-plugin -D
  1. externals: {
  2.         'jQuery': '$', // $ 外部变量，不需要打包  
  3.     },
  5.  new addAssetCdnPlugin(true,{
  6.             'jQuery': "https://code.jquery.com/jquery-3.4.1.min.js",
  7.         })

providePlugin 给每个模块注入变量

  • npm install lodash -D (JS 工具库)
  1. new webpack.ProvidePlugin({
  2.             '$$': 'jquery' , // $ 来自于 jquery，每个模块都注入 $,但不是注入全局
  4.             '_map': ['lodash','map'],
  5.           }),

暴露在全局下 expose-loader

  • npm install expose-loader -D
  1. // 方式一：
  2.  module: {
  3.         rules:[
  4.           {
  5.               test: require.resolve('jquery'),
  6.               use: {
  7.                   loader: 'expose-loader',
  8.                   options:'$$'
  9.           },
  10.         }
  11.         ]
  12.     },
  14. // 方式二：
  15. require('expose-loader?$!jquery') // jquery 放在全局的 $ 符上 
  17. console.log($,window.$);