在前端开发中，常常需要使用到 webpack 进行打包、构建等操作，同时又需要使用Node.js的管理工具 npm 来对项目进来依赖的管理。在这种情况下，一款名为 sails-webpack2 的 npm 包便可以大展身手。sails-webpack2 是为sails v1实现集成webpack打包的插件，以及在生产流程中使用 webpack 的 node server。在这篇文章中，我们将详细介绍 sails-webpack2 的使用教程，帮助读者快速上手该 npm 包。
安装
安装 sails-webpack2 这个 package，可以直接使用 npm 命令进行安装：
npm i sails-webpack2 --save-dev
已经安装好的 sails 项目，需要进入到项目的根目录下，在命令行运行：
sails generate sails-webpack2
这个命令生成默认的配置文件，将 script 和 task 任务添加到 package.json 中。如果配置文件是 OK 的，或者你只是想要允许默认的，那么你就可以运行：
node app sails-webpack2:prod
来看看项目在 webpack 的生产环境中运行的效果。
配置
sails-webpack2 需要进行基本配置，以便项目可以在 webpack 的编译环境中运行。默认的配置文件是 ok 的，不过你可以根据你的需求进行一些修改或完全替换掉这个配置文件。
sails-webpack2 配置文件的路径是 config/webpack.js，你可以将你的自定义配置文件放置在同一个文件夹下，例如 config/webpack.custom.js。使用自定义配置时，在任务命令行中加入 --custom，命令如下：
node app sails-webpack2:prod --custom
使用
在默认的 sails-webpack2 配置下，该包的任务命令将在 sails lift 应用的默认生产环境中启动 webpack，并停止控制器自动编译的过程。本质上，该包在生产环境下使用的是预编译的、优化过的构建文件。
生产模式
开发模式下，为了使 Sails 程序的修改可以在webpack中得到及时的反应，在命令行输入：
sails lift --silly
在运行时，将 temp/views 目录和 assets 目录设置为热模块替换（HMR）模式。对 views 目录的任何修改都会触发webpack HMR系统。应用将继续监听应用程序的任何修改，这种方式可以让你在选择一个任务之后，通过默认的浏览器环境，而不必进入到另一个环境中去，来实时地查看你对于视图的修改。
上面的代码在默认生产环境中运行 webpack，如果你希望自定义 webpack 的代码打包行为，那么可以直接修改相应的配置。
开发模式
在开发模式下，推荐使用 Sails v1.x 应用程序的 CLI sails lift 命令来启动应用程序。sails-webpack2 已经完成了开箱即用，这部分的出色工作与 webpack 以及 webpack-dev-server 模块的先进特性密不可分。webpack-dev-server 更是为前端开发和调试提供了极致体验。
如果你正在在控制台中使用 sails lift 命令执行程序，在输出的控制台中，你会看到类似于下面的输出：
Starting Sails…
Starting app…
这个时候，你的 sails-webpack2 修正完成，并且项目在文件系统中还没有任何编译过的打包操作的情况下就直接运行了。
app/assets 这个目录包含了前端代码的静态文件，例如 JavaScript, CSS，LESS 等文件。
当生产模式下，应用程序将优化它的打包过程，但是开发模式下的这个过程并不优化，这意味着 webpack 将输出包含大量注释的代码，以便未来可以更好地分析代码与调试。
你可以使用以下命令启动应用程序，以便在生产模式下进行部署：
NODE_ENV=production sails lift --prod --no-debug
这个命令将禁用调试和其他信息的输出，以相对于开发模式达到更快的执行速度。
热模块替换
不同于 sails 将服务器代码打包并迅速地重新加载应用程序，sails-webpack2 使用了热模块替换技术以便能够更快地更新前端代码。简单来说，热模块替换技术充分利用了 webpack 的热替换技术，以便能够更快地将前端代码更新到应用程序中去。
为了启用 HMR（热模块替换）功能，请打开你的浏览器（现代浏览器都可以），并打开开发工具中的控制台界面，在控制台窗口内输入：
localStorage.reload = true;
这个操作将开启HMR模式，并在应用程序中实施你的修改，当你的文件保存时，你的代码便能够被实时地更新。
预编译
预编译的构建包含了生产环境下的最大优化。在 sails-webpack2 包启动的生产环境下，使用 webpack 构建代码，生成优化过的、压缩过的 JavaScript 文件。由于这些文件在运行时已经被优化过，因此它们对于应用程序的性能和性质方面将比自己构建的项目更好。
默认情况下，sails-webpack2 会为你构建一个稳定、可预测的编译环境。但是，如果你的前端代码需要自定义，请修改 config/webpack.js 文件中相应的配置，来生成一个新的编译环节。
部署
在部署你的 sails-webpack2 应用程序时，你需要让应用程序直接在以生产环境为主的服务器中运行。需要设置注册环境变量 $NODE_ENV 来指定程序的运行环境为 production。下面是加入环境变量的命令：
$ sudo env NODE_ENV=production pm2 start app.js
示例代码
这是一个简单的使用 sails-webpack2 的示例代码，你可以在此基础上快速上手该 npm 包：
npm i sails-webpack2 --save-dev sails generate sails-webpack2 node app sails-webpack2:prod --custom
结语
sails-webpack2 是一款非常方便实用的 npm 包，在使用 webpack 进行前端打包时带来了很多的便利。希望本文介绍的内容能帮助到读者，这篇文章详细讲述了 sails-webpack2 的安装、配置、使用以及示例代码的编写，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576b81e8991b448d4672