在前端开发中，Webpack 是一个非常流行的构建工具，它可以将多个 JavaScript 文件打包为一个文件，并且可以处理图片、CSS、字体等资源。然而，有时候我们需要将 JavaScript 文件中的文本（例如模板字符串）提取出来，以便于国际化等处理。这时候，就可以使用 npm 包 webpack-extract-bundle-text。
简介
webpack-extract-bundle-text 是一个 Webpack 插件，它可以从打包后的 JavaScript 文件中提取文本，然后存储到另外一个文件中。这样我们就可以方便地将文本提供给翻译团队、进行自动化翻译等操作。
安装
使用 npm 进行安装：
--- ------- --------------------------- ----------
使用方法
- 配置 webpack.config.js，添加插件：
----- ----------------------- - ---------------------------------------
-------------- - -
-- ------
-------- -
--- -------------------------
--------- --------------------
---
--
--- 在 JavaScript 文件中使用
__webpack_extract_bundle_text()方法：
------ -------- ---- ------------------ ----- ---- - ---------------------------------------- ------------------
- 执行 webpack 命令，可以看到生成了一个名为
[name].[hash].txt的文件，其中包含了从 JavaScript 文件中提取出来的文本。
注意事项
__webpack_extract_bundle_text()方法只能用于模板字符串（即使用反引号 `` 包裹的字符串）中。如果模板字符串中包含有换行符等特殊字符，需要使用
JSON.stringify()进行处理。ExtractBundleTextPlugin的选项：filename：输出的文件名模板，可以使用[name]、[hash]等变量。
示例代码
下面是一个完整的示例代码：
webpack.config.js
----- ---- - ----------------
----- ----------------------- - ---------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -------------------------
--------- --------------------
---
--
------- -
------ -
-
----- ----------
---- -------------
--
--
--
--src/index.js
------ -------- ---- ------------------ ----- ---- - ---------------------------------------- ------------------
src/template.html
----- ------ ----------------------------- ------
执行 webpack 命令后，会在 dist 文件夹下生成两个文件：index.[hash].js 和 index.[hash].txt，其中 txt 文件内容为：
-------
总结
webpack-extract-bundle-text 是一个非常实用的 Webpack 插件，它可以方便地从 JavaScript 文件中提取出文本，以便于国际化等操作。在使用过程中需要注意一些细节，例如只能用于模板字符串等。希望本文能够对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055b8081e8991b448d910c