webpack中引用jQuery的四种方式

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引入包的几种方式！