在前端开发中，Webpack 是一个非常强大的构建工具。通过使用 Webpack 我们可以很方便的将不同的模块和资源打包成最终的静态文件，交付给浏览器渲染。而 npm 是 Node.js 包管理工具，通过使用 npm 我们可以轻松获取和管理开源的 JavaScript 库和工具。
在本篇文章中，我将介绍一个 npm 包：webpack-custom-var-library-name-plugin，该插件可以帮助我们自定义 Webpack 打包后生成的 JavaScript 库名称。本文将详细介绍使用该插件的步骤，旨在提供深度和学习以及指导意义。本文包含示例代码，帮助读者更好的理解和实践。
安装
使用 npm 安装 webpack-custom-var-library-name-plugin：
npm install webpack-custom-var-library-name-plugin
使用
配置
Webpack 配置文件中添加以下代码，即可配置 webpack-custom-var-library-name-plugin：
-- -------------------- ---- -------
----- --------------------------------- - --------------------------------------------------
-------------- - -
-- ---------- --
-------- -
--- -----------------------------------
------------ ------------------ -- ----
---
--
--libraryName 是一个变量，可以自定义 JavaScript 库名称。在上面的配置中，我们将 JavaScript 库名称设置为 [name]-[hash:8]，其中 [name] 是入口文件名称，[hash:8] 是打包后的 hash 值前八位。因此，如果我们的入口文件名称是 app.js，则生成的 JavaScript 库名称为 app-e2fa0d23.js。
使用
当我们通过 Webpack 打包后，即可在生成的 JavaScript 文件中看到自定义名称。例如，在我们的示例中，我们可以在生成的 app-e2fa0d23.js 文件中看到：
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),t.default=function(){console.log("Hello, webpack-custom-var-library-name-plugin!")}}]);在代码中可以看到，我们自定义的 JavaScript 库名称是 app-e2fa0d23.js。
示例
以下是一个简单的实例，它将一个入口文件 app.js 编译为 app-[hash:8].js。在示例代码中，我们创建了一个 src/index.js 文件，并将其作为 Webpack 入口文件。在 package.json 中添加以下命令：
"scripts": {
"build": "webpack"
}执行 npm run build 命令进行打包，即可生成自定义 JavaScript 库名称的文件。
index.js
import greeter from './greeter'; document.body.innerHTML = greeter();
greeter.js
export default function greeter() {
return '<h1>Hello, webpack-custom-var-library-name-plugin!</h1>';
}webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------------------------- - --------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------
----- ----------------------- --------
-------- ------------
--
-------- -
--- -----------------------------------
------------ ------------------
---
--
--总结
本篇文章介绍了使用 npm 包 webpack-custom-var-library-name-plugin 的步骤，为读者提供了深度和学习以及指导意义。Webpack 自定义 JavaScript 库名称对于前端开发中的一些场景尤其有用。通过本文，读者可以学习如何使用该插件，并实践自己的 Webpack 配置文件。
希望本篇文章能帮助读者更好的理解和掌握 Webpack 自定义 JavaScript 库名称的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61806