我假设你已经知道什么是 Webpack ,为什么它真棒,它是如何工作的,所以让我们开始:
可能你已经知道了 Webpack 的这些常用的工具,比如: , , , 和其他流行的一些加载器或插件。
offline-plugin(脱机插件)
webpack 的脱机插件(ServiceWorker,AppCache)
来自官方的说明:
此插件旨在为 webpack 项目提供脱机体验。它使用 ServiceWorker 和 AppCache 作为底层的备用方案。只需将此插件包含在你的 webpack.config
中,并在运行时伴随着你的客户端脚本,并且你的项目将通过缓存 webpack 输出的所有(或部分)资源而脱机。
[repo owner=”NekR” name=”offline-plugin”]
preload-webpack-plugin(预加载插件)
webpack 预加载插件
来自官方的说明:
一个 webpack 插件,使用 <link rel ='preload'/>
自动预加载异步的(和其他类型)JavaScript 块。有助于延迟加载。
[repo owner=”GoogleChrome” name=”preload-webpack-plugin”]
webpack-manifest-plugin(资源清单插件)
用于生成资源清单的Webpack插件
自动为你的 web app 生成 。
[repo owner=”danethurber” name=”webpack-manifest-plugin”]
purifycss-webpack(CSS净化加载器)
使用 webpack 删除没用的 CSS
你可能不希望在生产构建中包含未使用的 CSS ,这就是 的目的。这个 webpack 加载器旨在删除未使用的css选择器。
注意:您应该结合 使用。
[repo owner=”webpack-contrib” name=”purifycss-webpack”]
copy-webpack-plugin(拷贝插件)
这是一个 webpack 插件,它将单个文件或整个目录复制到构建目录。
简单的插件,允许您复制文件/目录。
常见的用例是将静态文件(媒体介质,图像)复制到dist文件夹中:
new CopyWebpackPlugin([ { from: _.cwd('./static'), // to the root of the dist path to: './' } ])
[repo owner=”kevlened” name=”copy-webpack-plugin”]
isomorphic-style-loader(同构样式加载器)
适用于Webpack的CSS样式加载器,针对同构(通用)web应用程序进行了优化。
来自官方的说明:
一种可供选择的的 CSS 样式加载器,它类似于 ,但是针对 进行了优化。除了 style-loader 提供的功能以外,它允许在服务器端渲染(SSR)期间 渲染 ,可以在 styles
对象中添加两个助手方法 – ._insertCss()
(将 CSS 注入 DOM )和 ._getCss()
(返回CSS字符串)。
[repo owner=”kriasoft” name=”isomorphic-style-loader”]
eslint-loader(eslint加载器)
适用于 webpack 的 eslint 加载器
你知道 eslint 的 fix
选项吗? 使用此选项,你的代码将被 eslint 自动格式化。
[repo owner=”MoOx” name=”eslint-loader”]
如何使用
如何使用所有这些插件和装载器构建应用程序?
原文链接:
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂