前言
对于前端开发者来说，webpack 和 egg.js 都是必备的技能。而 egg-webpack 这个 npm 包则是将两个技能结合在一起，既可以使用 egg.js 框架，又可以通过 webpack 进行前端开发。
本文将介绍 egg-webpack 的使用方法，以及如何在 egg.js 项目中使用 webpack。
安装 egg-webpack
要使用 egg-webpack，首先需要在 egg.js 项目中安装该包。可以通过以下命令来进行安装：
npm i egg-webpack --save-dev
安装完成后，需要在项目的 config/plugin.js 中启动 egg-webpack 插件：
exports.webpack = {
enable: true,
package: 'egg-webpack'
};接下来，就可以在 egg.js 项目中使用 webpack 了。
配置 webpack
接下来需要配置 webpack，在项目的根目录下新建一个 webpack.config.js 文件，并在文件中添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - ----- -- -
----- ------- - ---
--------------- - -
------------------ -
-
----- --------------
------ -
---- ------------------
--
------- -
----- ---------------------- --------------
--------- -----------
-
-
-
--
------ --------
--上面的代码定义了一个 webpack 配置对象，其中包含了一个开发模式的入口文件 app/web/index.js 和输出目录 app/public。
使用 webpack
在 controller 或 middleware 中使用 webpack，需要通过 app.webpack 对象来获取 webpack 对象：
-- -------------------- ---- -------
----- - ---------- - - ---------------
----- -------------- ------- ---------- -
----- ------- -
----- - ---- --- - - -----
----- ------- - ------------
----- ----- - ----- --------------
----- ------ - ---------------------------------
----- ---------------------- -
--- -------------
---
-
-
-------------- - ---------------上面的代码中，首先获取了 app.webpack 对象，然后通过 webpack.run() 函数来运行 webpack。运行完成后，可以通过 stats.toJson().assetsByChunkName 来获取输出文件的文件名。
示例代码
完整的 egg.js 项目示例代码，可以在以下地址中找到：https://github.com/easy-team/egg-webpack-example。
总结
本文介绍了如何使用 npm 包 egg-webpack 在 egg.js 项目中使用 webpack 进行前端开发，并提供了相应的代码示例。希望本文能够帮助到各位前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6a6b5cbfe1ea06115b5