webpack 常用插件及用途

学习 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 的概念页面，以及通过缓存指南来弄清如何与长期缓存相关联。

webpack.HotModuleReplacementPlugin

webpack自带，热替换插件

webpack.optimize.UglifyJsPlugin

webpack自带，运行 UglifyJS 来压缩输出文件

压缩前

压缩后

webpack.DefinePlugin

webpack自带，设置环境变量
可以在入口文件index.js里用process.env.NODE_ENV获得

CommonsChunkPlugin

代码分离 webpack 中文网 新手教程

webpack自带，删除代码分离不同js中的重复模块

CommonsChunkPlugin允许我们将常见的依赖项提取到现有的条目块或全新的块中。我们来使用这个来重复上一个例子中的lodash依赖：

手动通过entry（入口）进行代码分离时，这种方法有一些陷阱：

• 如果输入块之间有任何重复的模块，它们将被包含在两个bundle中。
• 它并不灵活，不能用于使用核心应用程序逻辑动态分割代码。

这两点中的第一点绝对是我们示例的一个问题，因为lodash也是在./src/index.js中导入的，因此将在两个bundle中重复。我们通过使用CommonsChunkPlugin来删除这个重复。

增加如下代码

使用之前

使用之后