我假设你已经知道什么是 webpack ,为什么它真棒,它是如何工作的,所以让我们开始:
可能你已经知道了 Webpack 的这些常用的工具,比如: style-loader ,html-webpack-plugin ,extract-text-webpack-plugin ,file-loader 和其他流行的一些加载器或插件。
webpack 的脱机插件(ServiceWorker,AppCache)
来自官方的说明:
此插件旨在为 webpack 项目提供脱机体验。它使用 ServiceWorker 和 AppCache 作为底层的备用方案。只需将此插件包含在你的
中,并在运行时伴随着你的客户端脚本,并且你的项目将通过缓存 webpack 输出的所有(或部分)资源而脱机。
- webpack.config
Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)
https://github.com/NekR/offline-plugin
webpack 预加载插件
来自官方的说明:
一个 webpack 插件,使用
自动预加载异步的(和其他类型)JavaScript 块。有助于延迟加载。
- <link rel ='preload'/>
A Webpack plugin for wiring up `` (and prefetch) - supports async chunks
https://github.com/GoogleChrome/preload-webpack-plugin
用于生成资源清单的 Webpack 插件
自动为你的 web app 生成 manifest.json 。
webpack plugin for generating asset manifests
https://github.com/danethurber/webpack-manifest-plugin
使用 webpack 删除没用的 CSS
你可能不希望在生产构建中包含未使用的 CSS ,这就是 Purify-CSS 的目的。这个 webpack 加载器旨在删除未使用的 css 选择器。
注意:您应该结合 extract-text-webpack-plugin 使用。
Remove unused CSS with webpack
https://www.npmjs.com/package/purifycss-webpack
这是一个 webpack 插件,它将单个文件或整个目录复制到构建目录。
简单的插件,允许您复制文件 / 目录。
常见的用例是将静态文件(媒体介质,图像)复制到 dist 文件夹中:
- new CopyWebpackPlugin([
- {
- from: _.cwd('./static'),
- // to the root of the dist path
- to: './'
- }
- ])
Copy files and directories in webpack
https://github.com/kevlened/copy-webpack-plugin
适用于 Webpack 的 CSS 样式加载器,针对同构(通用)web 应用程序进行了优化。
来自官方的说明:
一种可供选择的的 CSS 样式加载器,它类似于 style-loader ,但是针对 同构应用程序 进行了优化。除了 style-loader 提供的功能以外,它允许在服务器端渲染(SSR)期间 渲染 CSS 关键路径 ,可以在
对象中添加两个助手方法 –
- styles
(将 CSS 注入 DOM )和
- ._insertCss()
(返回 CSS 字符串)。
- ._getCss()
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps
https://reactstarter.com
适用于 webpack 的 eslint 加载器
你知道 eslint 的
选项吗? 使用此选项,你的代码将被 eslint 自动格式化。
- fix
eslint loader (for webpack)
https://github.com/MoOx/eslint-loader
如何使用所有这些插件和装载器构建应用程序? 请看这个例子。
来源: http://www.css88.com/archives/7632