随着前端技术的不断发展，越来越多的开发者开始将自己的代码封装成 npm 模块并发布到 npm 上。本文将介绍如何使用 webpack4 打包 npm 模块，并发布到 npm 上。
1. 创建 npm 模块
首先，我们需要创建一个 npm 模块。在命令行中运行以下命令：
$ mkdir my-npm-module $ cd my-npm-module $ npm init
这会创建一个名为 my-npm-module 的文件夹，并在其中创建一个 package.json 文件，用于描述 npm 模块的信息。
2. 安装 webpack4
接下来，我们需要安装 webpack4。在命令行中运行以下命令：
$ npm install webpack webpack-cli --save-dev
这会将 webpack4 安装到我们的项目中，并将其添加到 package.json 文件中的 devDependencies 中。
3. 配置 webpack4
在项目根目录下创建一个名为 webpack.config.js 的文件，并将以下代码添加到其中：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -------------------
-------- --------------
-------------- -----
-
--这会告诉 webpack4，我们的入口文件是 src/index.js，输出文件是 dist/my-npm-module.js，并且我们的模块名称为 myNpmModule，并且可以在 CommonJS、AMD 和全局变量环境中使用。
4. 编写源码
在 src 目录下创建一个名为 index.js 的文件，并在其中编写我们的源码。例如：
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
module.exports = {
sayHello
};这里我们定义了一个名为 sayHello 的函数，并将其导出。
5. 打包 npm 模块
运行以下命令，将我们的代码打包成 npm 模块：
$ npx webpack --mode production
这会将我们的代码打包成 dist/my-npm-module.js 文件。
6. 发布 npm 模块
最后，我们需要将我们的 npm 模块发布到 npm 上。首先，我们需要注册一个 npm 账号，然后在命令行中运行以下命令：
$ npm login $ npm publish
这会将我们的 npm 模块发布到 npm 上。
总结
在本文中，我们介绍了如何使用 webpack4 打包 npm 模块，并发布到 npm 上。希望这篇文章能够对初学者有所帮助。完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d39a4d3423812e4b3e567