7

我正在将 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/
        ...
4

0 回答 0