简介
egg-webpack-dev-server 是一个 Egg.js 插件，可以将 Webpack 封装进来，提供方便快捷的本地开发环境，适用于前端开发。
安装
通过 npm 安装 egg-webpack-dev-server：
$ npm i egg-webpack-dev-server --save-dev
使用方式
- 启用插件
在 config/plugin.js 中添加插件配置：
exports.webpack = {
enable: true,
package: 'egg-webpack-dev-server'
};- 配置 webpack
在 config/config.default.js 中配置 webpack，例如：
-- -------------------- ---- -------
----- ---- - ----------------
--------------- - -
-- ------- --------
------- -------------------- ----------------------------
-- -- --- ---------- --
-------- -
------- -----
---- -
--------- ------------------------ -------------------------------
----------- ------------------------ -----------------
-
--
-- --- ---------------- ------
---------- -
-------- - ------------------------------ --- -
-
--- 使用本地环境
对于本地环境（如 NODE_ENV=development），通过浏览器访问 http://localhost:7001/__webpack_dev_server，即可启动本地 WebpackDevServer。
- 使用 DLL
你可以使用 DLL 技术（Dynamic Link Library，动态链接库）来提高本地开发环境的速度。为了使用 DLL，你需要做以下几个步骤：
- 在
webpack.dev.config.js文件中配置DllPlugin，生成library-manifest.json和libraryName.dll.js。 - 在
config/config.default.js中添加builder配置，生成 DLL 文件。 - 在
config/config.default.js中添加一份 Webpack 配置来加载 DLL 文件。
在这之后，你就可以通过 http://localhost:7001/library/libraryName.dll.js 来访问 DLL 文件了。
示例代码
下面是一个使用 egg-webpack-dev-server 的示例代码：
-- -------------------- ---- -------
-- ----------------
--------------- - -
------- -----
-------- ------------------------
--
-- ------------------------
----- ---- - ----------------
--------------- - -
------- -------------------- ----------------------------
-------- -
------- -----
---- -
--------- ------------------------ -------------------------------
----------- ------------------------ -----------------
-
--
---------- -
-------- - ------------------------------ --- -
-
--
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
----- ----------- - -------------
-------------- - -
------ -
------- --------- -------------
--
------- -
----- --------------------------- ---------
--------- ----------------
-------- ------------
--
-------- -
--- -------------------
----- --------------------------- ------------------------------
----- ------------
-------- --------------
---
--
--
-- ------------
-
---------- -
------ -------- ----
-
-总结
egg-webpack-dev-server 为前端开发提供了便捷的本地开发环境，使得开发者可以专注于业务逻辑的编写，而将底层细节交给插件来完成。同时，使用 DLL 技术可以提高本地开发环境的速度，加快开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66c3