webpack 常用插件及用途

2017-08-23 本文已影响227人 waka

学习 webpack 极其推荐跟着这个教程走一遍 https://doc.webpack-china.org/guides/

html-webpack-plugin

我们可以看到，webpack 生成 print.bundle.js
和 app.bundle.js
文件，这也和我们在 index.html
文件中指定的文件名称相对应。如果你在浏览器中打开 index.html
，就可以看到在点击按钮时会发生什么。
但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html
文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin
来解决这个问题。

clean-webpack-plugin

你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist
文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist
文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist
文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。
clean-webpack-plugin
是一个比较普及的管理插件，让我们安装和配置下。

webpack-manifest-plugin

你可能会感兴趣，webpack及其插件似乎“知道”应该哪些文件生成。答案是，通过 manifest，webpack 能够对「你的模块映射到输出 bundle 的过程」保持追踪。如果你对通过其他方式来管理 webpack 的输出更感兴趣，那么首先了解 manifest 是个好的开始。
通过使用 WebpackManifestPlugin
，可以直接将数据提取到一个 json 文件，以供使用。
我们不会在此展示一个关于如何在你的项目中使用此插件的完整示例，但是你可以仔细深入阅读 manifest 的概念页面，以及通过缓存指南来弄清如何与长期缓存相关联。