对于前端开发来说，打包是必备的一项技能。Webpack 是目前最为流行的打包工具之一，它可以将多个模块打包成一个或多个静态资源文件。但是，Webpack 在打包之后会生成一些默认的文件名，这些文件名并不总是符合我们的需求，因此需要配置打包后的文件名。
如何配置
在 Webpack 配置文件中，可以通过 output 配置项来定义打包后文件的名称和路径，具体如下：
module.exports = {
output: {
filename: 'bundle.js', // 打包后生成的文件名
path: path.resolve(__dirname, 'dist'), // 打包后生成的文件路径
publicPath: '/'
},
// rest of the configuration
};上述代码中的 output 配置项包含以下参数：
filename表示打包后输出的文件名，默认为 main.js。path表示打包后输出文件的路径，默认为dist目录。publicPath表示 Webpack 打包输出文件的 URL 路径，一般是用来设置静态资源的根路径。
文件名的配置规则
Webpack 支持多种文件名的配置方式，下面来介绍一些常见的文件名配置规则：
[name]
[name] 表示模块的名称，在使用 CommonJS 或 ES6 模块时，模块的名称就是文件名。用于将模块打包成多个文件时常常使用。
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
--------- ------------ -- ---------- -------- - --------
----- ----------------------- --------
----------- ---
--
-- ----- -------------
--[hash]
[hash] 表示本次打包的 hash 值，每次打包时如果文件内容发生变化，这个值也会随之改变，用于保证文件的唯一性。用于解决缓存问题时经常使用。
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- ------------------- -- ------------------------
----- ----------------------- --------
----------- ---
--
-- ----- -------------
--[chunkhash]
[chunkhash] 表示每个打包生成的文件的唯一 hash 值，与 [hash] 相比，它只针对于每个 chunk 进行了 hash 计算，因此可以避免无关代码对缓存的影响。用于生产环境时常常使用。
-- -------------------- ---- -------
-------------- - -
------ -
----- -----------------
------- --------- -------------
--
------- -
--------- ------------------------ -- -----------------------------
----- ----------------------- --------
----------- ---
--
-- ----- -------------
--示例代码
下面给出一个完整的 Webpack 配置文件示例，展示了如何使用以上文件名配置规则：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
----- -----------------
------- --------- ------------ --------------------
--
------- -
--------- ------------------------
----- ----------------------- --------
----------- ----
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- ------------------------------------
--
--
--
-
----- ---------
---- ---------------- --------------
--
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ -----
--
--
--
--
--
--
-------- ---- -------------------
--------- -----------------
----
------------- -
------------ -
------- ------
----- --------- -- ----- -------- ------------ ------------------ -- - -------- -----
--
-
--总结
通过上述介绍，我们可以清晰地了解到如何配置 Webpack 打包后的文件名，并学习了常用的文件名配置规则。合理地配置文件名可以提高网页的性能和可维护性，为今后的 Webpack 打包工作带来很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f6d1d7d4982a6eb08dae4