控制 webpack 和 babel 的输出
前端开发中，我们通常需要使用 webpack 和 babel 来做各种工程化的优化和转译。在使用这两个工具的时候，我们往往需要控制输出的格式，以便更好地满足项目的需求。本文将介绍如何控制 webpack 和 babel 的输出，包括转译 ES6、压缩代码、代码分离等。
一、控制 webpack 的输出
- 转译 ES6
在 webpack 中使用 babel-loader 可以把 ES6 转译成 ES5，使得浏览器可以正常运行。可以在 webpack 的配置文件中添加以下代码来指定要转译的 ES6 文件和转译后的输出目录：
-- -------------------- ---- ------- -------------- - - ------ ------------- ------- - --------- ----------- -- ------- - ------ - - ----- -------- -------- --------------- ---- -------------- - - - --展开代码
- 压缩代码
在 webpack 中使用 UglifyJSPlugin 可以把代码压缩，减少加载时间，提高网页性能。可以在 webpack 的配置文件中添加以下代码来启用 UglifyJSPlugin：
-- -------------------- ---- ------- ----- -------------- - ---------------------------------- -------------- - - ------ ------------- ------- - --------- ----------- -- -------- - --- ---------------- - --展开代码
- 代码分离
在 webpack 中使用 SplitChunksPlugin 可以把代码分为多个文件，使得加载速度更快。可以在 webpack 的配置文件中添加以下代码来启用 SplitChunksPlugin：
-- -------------------- ---- ------- -------------- - - ------ - ----- ------------- ------- -------- -- ------- - --------- ------------------ -- ------------- - ------------ - ------- ----- - - --展开代码
以上代码会把 lodash 单独打包成一个文件，使得每次修改代码后只需要加载 main.bundle.js 文件即可。
二、控制 babel 的输出
- 转译 ES6
在 babel 中使用 preset-env 可以把 ES6 转译成 ES5，使得浏览器可以正常运行。可以在 babel 的配置文件中添加以下代码来指定要转译的 ES6 文件和转译后的输出目录：
-- -------------------- ---- ------- -------------- - ------------- - ---------------- ----- ------- - - - ------------- - -------- - ----- ----- -------- ----- ------- ----- ------- ------- -- ------------ -------- -- -- -- ------ - ------- -- -展开代码
- 压缩代码
在 babel 中使用 babel-minify 可以把代码压缩，减少加载时间，提高网页性能。可以在 babel 的配置文件中添加以下代码来启用 babel-minify：
-- -------------------- ---- ------- ----- ------ - ------------------------ -------------- - ------------- - ---------------- ----- ------- - - - ------------- - -------- - ----- ----- -------- ----- ------- ----- ------- ------- -- ------------ -------- -- -- -- ------ - -------- --------- ---- -- -展开代码
- 增加标识符
在 babel 中使用 plugin-transform-runtime 可以为许多需要的语言特性引入辅助函数，但是这个插件会增加一些内部的标识符，可以在 babel 的配置文件中添加以下代码来去除这些标识符：
-- -------------------- ---- ------- ----- ------- - - - -------------------- - -------- ------ ------------ -------- ------- - - - -- ----- ------- - ------------------------------------ -------------- - - -------- ------- -- -- -------- - ---------- ------ ---------- ----------------------------------- ---------- --- -展开代码
以上是如何控制 webpack 和 babel 的输出，值得开发者们参考借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd8ff5e46428fe9e726d4c
