Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA~Workbox webpack Plugins(译) #29

Open
XJIANBIN opened this issue Oct 23, 2019 · 0 comments
Open

PWA~Workbox webpack Plugins(译) #29

XJIANBIN opened this issue Oct 23, 2019 · 0 comments

Comments

@XJIANBIN
Copy link
Owner

原文链接

Workbox webpack Plugins

Workbox提供了两个Webpack插件:一个为您生成一个完整的Service Worker,另一个为生成要预缓存的资产列表注入到Service Worker文件中。
插件在workbox-webpack-plugin模块中实现为两个类,分别称为GenerateSW和InjectManifest。
以下问题的答案可以帮助您选择要使用的正确插件和配置

怎么选择插件?

GenerateSW Plugin(GenerateSW插件将为您创建一个 service worker 文件,并将其添加到Webpack pipeline)

  • 何时使用generateSW
    • 您要预缓存文件
    • 您具有简单的运行时配置需求(例如,该配置允许您定义路由和策略)。
  • 何时不使用generateSW
    • 您要使用其他Service Worker功能(即Web Push)。
    • 您要导入其他脚本或添加其他逻辑。

InjectManifest Plugin (InjectManifest插件将生成要预缓存的URL列表,并将该预缓存清单添加到现有service worker文件中。其他保持文件原样。)

  • 何时使用injectManifest
    • 你想更好地控制service worker。
    • 你要预缓存文件。
    • 你在路由方面有更复杂的需求。。
    • 你想将service worker与其他API(例如Web Push)一起使用。。
  • 何时不使用injectManifest
    • 您想要将service worker添加到站点的最简单方法。

GenerateSW Plugin

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      option: 'value',
    })
  ]
};

InjectManifest Plugin

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({option: 'value'})
  ]
};

缓存其他非Webpack资产

默认情况下,两个插件都会生成一个预缓存清单,其中包含由当前Webpack编译创建的资产的URL。 webpack不“知道”的任何资产都不会被提取。
如果需要预缓存在webpack之外管理的其他资产,则可以使用globDirectory和globPatterns选项指定如何查找这些其他资产。

如果您决定使用globDirectory和globPatterns,则适用以下条件:

  • 将针对本地文件系统执行glob模式匹配,并且globDirectory设置为的目录必须在插件运行时存在。这可能与使用内存文件系统的webpack-dev-server配置不符。
  • 也可以使用适用于基于glob的预缓存清单的选项,例如manifestTranforms和ModifyUrlPrefix,但它们仅适用于通过glob模式匹配的条目,不适用于通过webpack编译获取的任何资产。

其他

可在webpack文档的“渐进式Web应用程序”部分中找到有关在较大的Webpack构建环境中使用插件的指南。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant