第一种方式

在 webpack 的入口文件中直接引入第三方类库，向外全局暴露；

  1. 使用方式：直接在入口文件 app.js 中引入 jquery
    import $ from 'jquery' // 使用 esm 方式引入
require('jquery') // 使用 commonJs 方式映入
  2. 缺点：比较麻烦，每次都要引入；

第二种方式

非 webapck 的处理方式，插件引入（Vue.use 的方式引入）；

  1. 优点：不需要手工引了，模块中直接使用；
  2. 缺点：是无法在全局 window 下使用；

第三种方式

非 webapck 的处理方式，CDN

  1. 使用方式：使用 html-webpack-plugin 直接在模板中引入某个 cdn 上的某个第三方库（如：jquery）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>third party</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

    // 如果之前以直接引入的方式在项目中使用（打包体积大），现改成 cdn 方式引入，又不想将代码中的 import $ from 'jquery' 或 var $ = require('jquery')，则使用 external 可以实现
// 1.可以在 app.js 入口文件中添加如下代码：
var $ = require('jquery')
// 2.在 webpack.config.js 中添加如下代码
const path = require("path");
module.exports = {
  mode: "none",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
    publicPath: "dist/",
  },
  module: {
    rules: [],
  },
  externals: { // 不会将 jquery 打包
    // 其中 jquery 代表的是 require('jquery') 中的 jquery
    // 而 jQuery 和 $ 代表的是 jquery 这个库自身提供的可实例化的标识符
    jquery: "jQuery",
    jquery: "$",
  },
};

    // 在 module.js 中使用 jquery 即可
module.exports = function () {
  $(document.body).append("<h1>hello webpack</h1>");
};
  2. 缺点：需要手动的导入 CDN 脚本，而且不管代码里用到没有用到，都会引入；

第四种方式

html-webpack-externals-plugin 插件的方式引入；

  1. 使用方式
    const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");
const path = require("path");
module.exports = {
  mode: "none",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
    publicPath: "dist/",
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: "jquery", // 模块名
          entry: "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js",
          global: "$", // 全局变量名
        },
      ],
    }),
  ],
};
// 若引用了 jquery 则会自动插入到 html 的 script 中，没有引用则不会
  2. 优点：不再需要手动引入，按需加载；

第五种方式

ProvidePlugin 插件的方式引入

  1. 使用方式：在 webpack.config.js 中进行配置；
    const path = require("path");
module.exports = {
  mode: "none",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
    publicPath: "dist/",
  },
  module: {
    rules: [],
  },
  // plugins 数组里面放插件
  plugins: [
    new webpack.ProvidePlugin({
      _: "lodash",
    }),
  ],
};

    var arr = [1, 2, 3, 4, 5, 6];
console.log(_.concat(arr, "~"));
  2. 优点：为了避免每次使用第三方库，每次都需要用 import 或者 require() 引用它们，可以将它们定义为全局的变量；

第六种方式

expose-loader 引入（与 ProvidePlugin 实现相同的功能）；

  1. 使用方式
    const path = require("path");
module.exports = {
  mode: "none",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
    publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: require.resolve('jquery’),
        loader: expose-loader,
        options:{
          exposes:{
            globalName: '$'
            override:true,
          }，
        }，
      }，
    ],
  },
};
  2. 优点：为了避免每次使用第三方库，每次都需要用 import 或者 require() 引用它们，可以将它们定义为全局的变量；
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于产品、设计、开发的问题和看法，还有技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程

了解更多

目录

  1. 1. 第一种方式
  2. 2. 第二种方式
  3. 3. 第三种方式
  4. 4. 第四种方式
  5. 5. 第五种方式
  6. 6. 第六种方式