Question

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

该库由一个带有原型的主要功能组成，该原型已导出，并且依赖于它导入到该主要功能文件中的其他几个功能。这无需绑定即可工作，我认为该文件应该是webpack的入口点。

我的目标是将其捆绑到一些mylib.min.js中，以便能够像使用jQuery或类似库那样在浏览器中对其进行访问。因此，我不想捆绑整个Web应用程序，而只捆绑我编写的JS库。

我并不是很满意，因为所有教程都展示了如何捆绑整个Web应用程序。我的问题是：

我如何导出库的主要功能才能在浏览器中访问它？
我如何配置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创作库。您将被重定向到良好的网站。网站可能会发生变化。

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

1 个答案: