我有一个现有的快递服务器,用于提供静态资产/ api数据调用。通常如何将webpack集成到这种设置中?是否必须运行webpack dev服务器才能更换热模块?有没有办法让webpack捆绑所有模块,然后通过从现有服务器请求静态资产来替换热模块?
提前致谢。
答案 0 :(得分:7)
这是我的HMR
的最小快速设置server.js
var express = require('express') var app = express() var morgan = require('morgan') var env = app.get('env') if (env == 'development') { var webpack = require('webpack') var webpackDevMiddleware = require('webpack-dev-middleware') var webpackHotMiddleware = require('webpack-hot-middleware') var config = require('./webpack.config') var compiler = webpack(config) app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) app.use(webpackHotMiddleware(compiler)) app.use(morgan('dev')) app.get("/", function(req, res) { res.sendFile(__dirname + '/index.html') }) } app.listen(8080, function(error) { if (error) { console.error(error) } else { console.info("==> Listening on port %s. Open up http://localhost:%s/ in your browser.", 8080, 8080) } })
和webpack.config.js(我删除了一些混乱,让它非常小)
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-hot-middleware/client', './index', ], output: { path: __dirname, filename: 'bundle.js', publicPath: '/static/' }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [ {test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} }, ] }, };
我认为这应该为您提供足够的信息,以便将webpack合并到您的快速服务器中。