【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到了吗？