我可以使用sailsjs重新加载webpack的热模块吗？
我正在使用sails.js进行一个项目并作出反应 。 我希望能够使用Webpack的热模块更换，所以我可以编辑我的代码，并立即在浏览器上更改。 不过，我怎样才能把这一切联系起来似乎并不明显。
我希望能够使用$ sails lift并只是工作。
如果这是一个node.js项目，我简单地configurationwebpack使用react-transform-hmr并从package.json启动webpack-dev-server （例如这里所描述的 ）。 但是，这似乎并不是一件非常有趣的事情。
我看到模块webpack-hot-middleware声称能够“在没有webpack-dev-server情况下将热重新加载到现有服务器”。 但是，我不确定在Sails> 0.10中添加Express中间件configuration的适当位置在哪里。
任何人都可以推荐一个好的方法来设置这个？
好了，在一些好的方法之后，好的方法是使用customMiddleware的http中间件configuration的旧customMiddleware选项，但只能用于保存在config/env/development.js的开发环境。
1）安装反应和反应（如果你还没有）：
$ npm install react react-dom --save
2）安装webpack，重新加载模块（＆ES6），支持sails：
$ npm install sails-webpack babel-core babel-loader \ babel-plugin-syntax-class-properties babel-plugin-syntax-decorators \ babel-plugin-syntax-object-rest-spread \ babel-plugin-transform-class-properties \ babel-plugin-transform-decorators-legacy \ babel-plugin-transform-object-rest-spread \ babel-preset-es2015 babel-preset-react \ copy-webpack-plugin file-loader --save
3）安装反应转换和中间件以进行热模块重新加载：
$ npm install babel-plugin-react-transform react-transform-catch-errors react-transform-hmr \ webpack-dev-middleware webpack-hot-middleware --save-dev
4）禁用通常会链接您的应用程序的内置grunt挂钩：
// .sailsrc { "hooks": { "grunt": false } }
5）configurationsails webpackconfiguration：
// config/webpack.js var webpack = require('webpack'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var path = require('path'); // compile js assets into a single bundle file module.exports.webpack = { options: { context: path.join(__dirname, '..'), devtool: 'eval', entry: [ './assets/js', 'webpack-hot-middleware/client' ], output: { path: path.resolve(__dirname, '../.tmp/public'), publicPath: "/", filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), /* Copy sails.io.js unmolested: */ new CopyWebpackPlugin([ { from: 'assets/js/dependencies', to: 'dependencies', force: true } ]), ], resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(bower_components|node_modules)/, loader: 'babel', }, { test: /\.css$/, loader: 'style!css' }, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: "file" } ] } }, // docs: https://webpack.github.io/docs/node.js-api.html#compiler watchOptions: { aggregateTimeout: 300 } };
6）在开发模式下configuration项目范围的.babelrc以使用热模块重新加载：
{ "presets": [ "es2015", "react", ], "plugins": [ "syntax-class-properties", "syntax-decorators", "syntax-object-rest-spread", "transform-class-properties", "transform-decorators-legacy", "transform-object-rest-spread" ], "env": { "development": { "plugins": [["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] }]] } } }
7）最后，将http.customMiddlewareconfiguration添加到http.customMiddleware的config/env/development.js ：
module.exports = { /* ... */ /* * Enable webpack hotloading while in development mode: */ http: { customMiddleware: function (app) { var webpack = require('webpack'); var webpackConfig = require('../webpack').webpack.options; var compiler = webpack(webpackConfig); app.use(require("webpack-dev-middleware")(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath } )); app.use(require("webpack-hot-middleware")(compiler, { reload: true } )); }, } /* ... */ };
假设你已经在assets/js/index.jsx （或类似的）和一个包含你的bundle.js文件的视图中获得了一个反应应用程序，你应该能够简单地$ sails lift sails $ sails lift并在你的浏览器的开发控制台上看到以下内容：
|> Now connected to Sails. \___/ For help, see: http://bit.ly/1DmTvgK (using browser SDK @v0.11.0) client.js:51 [HMR] connected
和繁荣，你应该在业务！
您的解决scheme应该很好，但是我想为其他读者提供一个快速解决scheme：
您可以完全删除Sails.js构buildpipe道并分别运行webpack。 在一个子shell中同时运行这两个命令应该可以做到。
( webpack & sails lift ; )
这两个命令都会运行，您将在terminal中看到合并的输出。 由于它在子shell中运行，所以Ctrl + C也会同时杀死它们。
你可以创build一个npm脚本来保存每一次写出这两个命令。
我们创build了自己的Sails钩子来内部处理Webpack，目前效果很好。 但是configuration需要一些清理： https ： //github.com/teamfa/sails-hook-webpack