javascript - 使用 webpack 和 publicPath 获取静态资源

Question

重写了以下问题，因为我现在有一个可行的解决方案，但没有回答上述问题。

展示如何使用打包资源的不同场景的存储库webpack名为example-webpack-dynamic-resources。它包含3个模块：

• 内联：一种解决方案，但在我的上下文中没有用（许多资源文件）
• 文件：使用插件webpack-require-from的解决方案
• 公共路径：还没有解决方案，显示我想如何使用__webpack?public_path__.

我想我已经阅读了有关 webpack 和publicPathand的任何资源__webpack_public_path__，但我没有让它工作。我尝试动态更改静态资源的路径，但失败了。

这是我的背景：

• 我构建了一个将在网页（HTML、CSS、Javascript）上使用的 Javascript 库。
• 它为小图像文件提供了很多 (>100) 静态资源，总大小 > 500 KB。浏览网站的用户只会使用其中的一小部分。
• 因此，我想将 CSS 打包到包中，但将图像资源保存在服务器上某处的目录中。它的默认路径是/img.
• 只要我使用相同的结构（这意味着，只有在 下的图像ROOT/img/**，一切都可以。
• 但是图书馆的用户应该能够根据自己的意愿配置图像资源的路径。

您将在我的示例存储库example-webpack-dynamic-resources的模块中找到所有相关文件public-path-resources。

• webpack.js：对 CSS 文件中引用的图像使用文件加载器。CSS 将由 style-loader 和 css-loader 内联。
• src/public-path.js：使用默认值定义全局变量（无环境变量）。
• src/index.js: 先要求public-path，后逻辑。
• examples/exam1-root/index.html：尝试使用子目录中的资产，lib因此将值设置为__webpack_public_path__ = '/lib/。不工作。
• examples/exam2-different-dirs/index.html：将库移动到不同的目录（不相关），但使用最初定义pgnv-assets的资产目录。在职的。
• examples/exam3-non-standard-dirs/index.html：尝试改为my-assets用作资产的目录。不工作。

运行时如何__webpack_public_path__在 index.html 文件中定义？

标签： javascriptwebpack