javascript - 如何将 js 库与 webpack 捆绑在浏览器中使用？

Question

我正在尝试使用 webpack 创建 js 库的缩小版本。

该库由一个带有导出原型(prototype)的主函数和它所依赖的几个其他函数组成，这些函数在主函数的文件中导入。这无需捆绑即可工作，我认为该文件应该是 webpack 的入口点。

我的目标是将它捆绑到一些 mylib.min.js 中，以便能够在浏览器中访问它，就像我使用 jQuery 或类似的库一样。所以我不想捆绑整个网络应用程序，只想捆绑我编写的 JS 库。

我并没有真正理解它，因为所有教程都展示了如何捆绑整个网络应用程序。我的问题是:

• 如何导出库的主要函数才能在浏览器中访问它？
• 我需要如何配置 webpack？
• 我应该如何在浏览器中包含并访问该包？

如果您可以推荐任何示例(例如教程、执行此操作的 gitub 存储库，...)，我会很高兴!欢迎任何建议!

Answer 1

你看过webpack网站上的文档吗？

这里是一个例子

为了广泛使用该库，我们希望它能够在不同的环境中兼容，即 CommonJS、AMD、Node.js 并作为全局变量。要使您的库可供使用，请在输出中添加库属性:

webpack.config.js

  var path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
-     filename: 'webpack-numbers.js'
+     filename: 'webpack-numbers.js',
+     library: 'webpackNumbers'
    },
    externals: {
      lodash: {
        commonjs: 'lodash',
        commonjs2: 'lodash',
        amd: 'lodash',
        root: '_'
      }
    }
  };

如果您对该特定文档有任何其他问题，只需 google webpack js 创作库即可。您将被重定向到好的网站。网站可能会更改模式。