如果你是前端工程师，那么你一定清楚进行源代码调试是非常重要的。最好的调试方式就是使用 source map。然而，在部署到生产环境时，你不希望暴露源代码。webpack 提供了一个功能叫做 source map 的东西，可以帮助你实现这个目标。
现在，我们来介绍一个 npm 包叫做 webpack-blocks-server-source-map，它允许你在 server 端创建源代码 map。这个包的使用方法非常简单，但是需要一些基础知识。在本文中，我们将提供使用实例和步骤。
安装
使用 npm 安装 webpack-blocks-server-source-map：
npm install webpack-blocks-server-source-map --save-dev
由于 webpack-blocks-server-source-map 依赖于 webpack 4，所以需要确保你已经安装了 webpack 4。
使用
- 配置
webpackBlock：
const { createConfig } = require('@webpack-blocks/webpack2')
const serverSourceMap = require('webpack-blocks-server-source-map')
const webpackConfig = createConfig([
serverSourceMap({
environment: 'node',
})
])上面的配置将会生成一个源代码 map 文件。你需要将源代码 map 文件和编译好的文件放在相同的目录。例如：
app.js app.js.map
一般情况下，app.js.map 文件会在编译时自动生成。你可以在命令行使用 --devtool source-map 来生成 source map 文件。
- 启用
source map
在 server 端启用 source map 非常简单。只需要使用 createSourceMapMiddleware、serveSourceMapMiddleware 和 middlewareChain 这些函数，它们都是从 webpack-blocks-server-source-map 包中导出来的。
例如，在 Express 中使用 source map：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- - -------------------------- ------------------------- --------------- - - ------------------------------------------- ----- --- - --------- ----- ---- - ---- -- ---- --- ---- ---- ---- ------------------------ ---------------------------- --------------------------- -- ---------------- -- -- - ------------------- --------- -- -------------------------- --
启动服务器并通过浏览器访问，你将会看到 source map 的效果。
示例代码
以下是一个例子，它使用 webpack-blocks-server-source-map 根据传入的 template 文件动态生成 HTML。
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
----- ------- - ------------------
----- ------------- - ---------------------------------
----- ------------- - ---------------------------------
----- - ------------ - - -----------------------------------
----- ----- - ---------------------------------
----- --------- - --------------------------------------
----- ----------- - ----------------------------------------
----- ---- - -------------------------------
----- ---- - -------------------------------
----- - -------------------------- ------------------------- --------------- - - -------------------------------------------
----- ---- - ----
----- ------------- - -------------------- --- ------------
----- ---------- - --------------
--------
-------
------
------- -----
--------- -------------------- --------- --------------
---
--
----- ----------------- - --------------
------------
---------------
----------- ----
------ ----------
---- -----
---
----------------
--------------
--
----- ---------------- - --------------
--------------
--
----- ------------- - -------------
- ------------------------- -------------------
- ------------------------- ------------------
-- --------------- -
---------------------------
--- ------------------------------------
-
-
----- --- - ---------
-- ----- ------
-- --------------- -
----- -------- - ----------------------
--------------------------------
--------------------------------
- ---- -
------------------------------------------- ---------
-
-- ----- ------ ---
------------------------
----------------------------
---------------------------
--
------------ ----- ---- -- -
--------------------------------- --------- --------------
--
---------------- -- -- -
------------------- --------- -- --------------------------
--总结
通过使用 webpack-blocks-server-source-map，你可以非常方便地为 server 端启用 source map。即使对于一些不熟悉 node.js 和 webpack 的开发者，这个过程也是非常简单的。希望本文能够帮助你更好地理解和使用 webpack-blocks-server-source-map。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0a81e8991b448d9aa8