适用于你下一个 React 应用的 7 个 Webpack 插件
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
原文来自Linguine Blog
Webpack优化
Webpack 带有一个名为optimization的配置属性。
在优化过程中，还有一个名为minimize和minimizer 的属性。
如果minimize等于 true，则minimizer内部的所有内容都会触发。
接下来我要介绍的几个 Webpack 插件，都应该位于minimizer属性内。
Terser webpack 插件
Terser 插件是一款非常棒的工具，可以最大限度地减小生产环境中应用程序的 JavaScript 包文件大小。
该插件的另一个优点是它支持 ES6+。
以下是 Terser 的基本配置。
来源：Terser插件
优化 CSS 资源 Webpack 插件
Optimize CSS assets Webpack 插件是另一个用于生产环境构建的插件。
它有助于优化和精简您的 React CSS 代码。
来源：优化 CSS 资源插件
Webpack插件
HTML Webpack 插件
HTML Webpack 插件对于开发和生产构建来说都是一个非常方便的插件。
它告诉 Webpack 生成一个 HTML 文件，并在其中注入一个包含 JavaScript 代码的 script 标签。
您只需要提供要使用的HTML模板即可。
您还可以添加压缩规则，例如删除注释、压缩 CSS 和 JavaScript。
但如果您只想在构建时使用 minify 属性，您可以这样做。
Webpack Define 插件
该插件随 Webpack node 模块一起提供，是开发 React 应用程序时一个方便的小工具。
DefinePlugin 允许您创建环境变量，并使其可供您的 JavaScript 代码访问。
迷你 CSS 提取插件
这款插件是另一款非常棒的生产工具。
它允许你将 React 应用中的 CSS 提取到每个 JavaScript 文件对应的单独文件中。
与 Extract Text Webpack 插件相比，该插件还有一些其他令人愉悦的特性：
- 异步加载
- 无重复编译
- 更易于使用
Webpack 模块
巴别加载器
该插件允许您编写最新一代的 JavaScript 代码，并将其转换为编译后的 ES5 版本。
现在来配置 babel-loader，使其支持 .js、.jsx 以及 Typescript（如果您正在使用它）。
来源：Babel 加载器
Babel 预设 React 应用
该模块由 Create React App 团队维护，它为您的 React 应用提供了一套很棒的预设。
我们只需要在 Babel 加载器配置中添加更多内容即可。
