随着前端开发变得越来越复杂，使用 Webpack 等工具来管理前端项目的依赖和构建环境已经成为常态。在使用 sails.js 框架进行后端开发时，如何与前端的 Webpack 配合使用呢？这里介绍一个 npm 包 sails-webpack-hook，可以非常方便地实现 sails.js 环境中前后端分离的开发模式。
安装 sails-webpack-hook
在命令行中输入以下命令安装 sails-webpack-hook：
$ npm install sails-webpack-hook --save-dev
使用 sails-webpack-hook
配置 sails.js
在 sails.js 项目的配置文件 config/main.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
-- -- ------- -------
-------- -
-- ------- -------
------- --------------------
-- ------------------ ---
---------------- -
-- ------- ------ ------ -- ----------------------
----- ------------
-- ------- ------ ---------
----- -----
-- ------------- ------ -------------------- ------- -----------
------------ ---------
-- ------- -----------
------- -----
-- -------
---- ----
-
-
-- ---
-配置 webpack
在 sails.js 项目的根目录下创建一个 webpack 配置文件 webpack.config.js，并添加以下配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
-------------- - -
----- --------------
------ ---------------------
------- -
----- ----------------------- ------ ------------
--------- --------
-
-在这个配置文件中，我们可以自行编写需要用到的 Webpack 配置。可以为各个项目添加自己的自定义配置。
启动 sails.js
在命令行中输入以下命令启动 sails.js：
$ sails lift
启动 Webpack Server
在命令行中输入以下命令启动 Webpack Server：
$ webpack-dev-server --config ./webpack.config.js --host localhost --port 9000 --hot
启用 sails-webpack-hook
在 sails.js 项目中，只需在 app.js 文件的顶部添加以下代码：
import '../js/app.js'
这样，在 sails.js 启动的同时，Webpack Server 也会被启动，就可以愉快地进行前后端分离的开发了。
总结
通过上述方法使用 sails-webpack-hook，我们就可以在 sails.js 开发中方便地使用 Webpack 进行前端资源管理，并实现前后端分离的开发模式。希望本文可以帮助到各位开发者，更好地组织自己的前端资源和项目结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0bab