您的位置:首页 » 分类: 前端工具 & 前端资源 & 开源项目 » 文章: 为 Progressive Web App 提供的 Webpack 加载器和插件

为 Progressive Web App 提供的 Webpack 加载器和插件

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

我假设你已经知道什么是 Webpack ,为什么它真棒,它是如何工作的,所以让我们开始:

可能你已经知道了 Webpack 的这些常用的工具,比如: style-loaderhtml-webpack-pluginextract-text-webpack-pluginfile-loader 和其他流行的一些加载器或插件。

offline-plugin(脱机插件)

webpack 的脱机插件(ServiceWorker,AppCache)

来自官方的说明:

此插件旨在为 webpack 项目提供脱机体验。它使用 ServiceWorker 和 AppCache 作为底层的备用方案。只需将此插件包含在你的 webpack.config 中,并在运行时伴随着你的客户端脚本,并且你的项目将通过缓存 webpack 输出的所有(或部分)资源而脱机。

NekR / offline-plugin

Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)

preload-webpack-plugin(预加载插件)

webpack 预加载插件

来自官方的说明:

一个 webpack 插件,使用 <link rel ='preload'/> 自动预加载异步的(和其他类型)JavaScript 块。有助于延迟加载。

GoogleChrome / preload-webpack-plugin

A Webpack plugin for wiring up `` (and prefetch) - supports async chunks

webpack-manifest-plugin(资源清单插件)

用于生成资源清单的Webpack插件

自动为你的 web app 生成 manifest.json

purifycss-webpack(CSS净化加载器)

使用 webpack 删除没用的 CSS

你可能不希望在生产构建中包含未使用的 CSS ,这就是 Purify-CSS 的目的。这个 webpack 加载器旨在删除未使用的css选择器。

注意:您应该结合 extract-text-webpack-plugin 使用。

copy-webpack-plugin(拷贝插件)

这是一个 webpack 插件,它将单个文件或整个目录复制到构建目录。

简单的插件,允许您复制文件/目录。

常见的用例是将静态文件(媒体介质,图像)复制到dist文件夹中:

new CopyWebpackPlugin([
            {
                from: _.cwd('./static'),
                // to the root of the dist path
                to: './'
            }
        ])

isomorphic-style-loader(同构样式加载器)

适用于Webpack的CSS样式加载器,针对同构(通用)web应用程序进行了优化。

来自官方的说明:

一种可供选择的的 CSS 样式加载器,它类似于 style-loader ,但是针对 同构应用程序 进行了优化。除了 style-loader 提供的功能以外,它允许在服务器端渲染(SSR)期间 渲染 CSS 关键路径 ,可以在 styles 对象中添加两个助手方法 – ._insertCss()(将 CSS 注入 DOM )和 ._getCss()(返回CSS字符串)。

kriasoft / isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

https://reactstarter.com

eslint-loader(eslint加载器)

适用于 webpack 的 eslint 加载器

你知道 eslint 的 fix 选项吗? 使用此选项,你的代码将被 eslint 自动格式化。

如何使用

如何使用所有这些插件和装载器构建应用程序? 请看这个例子。

原文链接:https://hackernoon.com/webpack-loaders-and-plugins-for-your-new-progressive-web-app-378e09f469

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

电子邮件地址不会被公开。 必填项已用*标注