前言
Webpack 是一个模块打包工具，但是配置文件会十分巨大且混乱。为了简化这一过程，Webpack 团队开发了一款 npm 包：webpack-nano。本文将介绍该 npm 包的使用教程及其深度和学习意义。
安装
首先，需要安装 webpack-nano：
npm i -D webpack-nano
注意：webpack-nano 是一个开发中的实验性 npm 包，可能会出现不稳定或推出新版的情况，需要注意版本号。
使用
基础
webpack-nano 的使用非常简洁，只需要在命令行下输入：
npx webpack
——如果以默认配置运行 webpack-nano，这将会搜索项目根目录下的 src/index.js 文件，并将其转换成已压缩的、优化过的 dist/main.js 文件。
配置
webpack-nano 的简单使用能力是值得称赞的，但是它还支持与其它 webpack 资源配合使用。这里有一个完整的 webpack.config.js 配置文件样本：
-- -------------------- ---- -------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -----------
--
-------- -
--- -----------------
-
--这个配置文件中，mode 选项设置为了 "development"，告诉 webpack 输出的 JS 文件未压缩，并且包含开发阶段的调试信息。entry 选项指定了入口文件，output 选项指定了出口文件名，并且按照上述配置将 JS 文件转换到 dist/bundle.js。最后，plugins 下面有一个自定义的、被称为 MyWebpackPlugin 的插件。
总结
Webpack 是一个十分强大的工具，但需要花费大量的精力来配置。webpack-nano 为使用该工具者提供了方便简洁的方式。借助 webpack-nano 可以快速地开始使用 Webpack，而不必为一些复杂的细节烦恼。
示例代码
假设我们有一个名为 src/index.js 的文件，并且它包含了如下代码：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ------ ---- ------------ ----- --- - --- ------ ----- ------ - --- --------- --------------- ----- ----- -- - -------- - ------ -------- --- ------------------------- -----------------
这里的代码我们可以通过 webpack-nano 进行打包，只需要执行命令：
npx webpack
在执行后，我们可以在 dist/main.js 文件中看到如下代码：
(() => {
'use strict';
var e = require("koa"), t = require("koa-router"), r = new e, o = new t, n = (e,t)=>{e.body = "Hello World!"};
o.get("/", n), e.use(o.routes()), e.listen(3e3)
})();在使用 webpack-nano 时，webpack 默认会在执行打包命令时自动搜索 src/index.js 文件，所以这个例子打包后的代码中并没有指定入口文件的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbfc6b5cbfe1ea0611c49