我正在将 Webpack 实现到旧版 Express 前端应用程序中。我已经按照说明实现了 webpack-dev-middleware 和 webpack-hot-middleware,但是我不知道如何实际引用 webpack-dev-middleware 在我的索引文件中构建的内存包。
server.js:
......
// Webpack HMR
if (isDevelopment) {
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
app.use(
require('webpack-dev-middleware')(compiler, {
noInfo: false,
hot: true,
publicPath: webpackConfig.output.publicPath,
})
);
app.use(require('webpack-hot-middleware')(compiler));
}
....
webpack.config.js:
...
entry: {
app: [
'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr&timeout=2000&overlay=false',
path.join(__dirname, './public/js/boot/app.js'),
],
deps: [
'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr&timeout=2000&overlay=false',
path.join(__dirname, './public/js/boot/deps.js'),
]
},
output: {
path: isDevelopment ? path.join(__dirname, './public/js/bundles') : path.join(__dirname, './dist/js/bundles'),
publicPath: '/',
filename: '[name].js'
},
....
Base view: server/views/index.jade:
...
script(src='/js/bundles/app.js')
script(src='/js/bundles/deps.js')
...
注意:如果我禁用webpack-dev-middleware
并仅使用 Webpack 构建文件,它们就可以正常工作。问题是(我认为)我在基本 index.jade 视图中使用该路径引用捆绑包的方式。由于 webpack-dev-middleware 将包写入内存而不是文件系统中的那个位置,它试图读取不存在的东西。
引用这些包路径的正确方法是什么,以便它们是来自 webpack-dev-middleware 的内存包?
项目布局:
- /
- 服务器.js
- webpack.config.js
- 服务器/
- 意见/
- index.jade(我的基本视图)
- 上市/
- js/
...
- js/