如何捆绑 js 库以在带有 webpack 的浏览器中使用？

Question

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

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

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

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

• 我必须如何导出库的主要功能才能在浏览器中访问它？
• 我需要如何配置 webpack？
• 我应该如何在浏览器中包含和访问捆绑包？

如果您可以推荐任何示例（例如教程、执行此操作的 gitub 存储库……），我会很高兴！欢迎提出任何建议！

Answer 1

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

这里是一个例子

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

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 创作库即可。您将被重定向到好的网站。网站可能会发生变化。