node.js - webpack-dev-middleware 和 Express - 无法让他们协作

Question

我正在尝试使用 Webpack 和 Express 建立我的第一个项目，但不知何故我做错了一些事情。

这就是我所做的:

<强>1。创建示例项目
使用 express-generator 创建了一个示例项目。我的文件夹结构是这样的:

express-project
  -app.js
  -webpack.config.js
  -public
    -javascripts
      -modules
      -build

<强>2。设置 Handlebars
将handlebars设置为 View /模板引擎并创建了几条路线

<强>3。网页包代码
创建了 Webpack 具体代码/配置如下

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var webpackHotMiddleware = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false';

module.exports = {
    resolve: {
        alias: {
            handlebars: path.resolve('public/vendor/handlebars-v4.0.5.js'),
            bootstrap: path.resolve('public/vendor/bootstrap/js/bootstrap.js'),
            pubsub: path.resolve('public/vendor/ba-tiny-pubsub.js')
        }
    },
    context: path.resolve('public/javascripts'),
    entry: {
        cart: ['./modules/cart', webpackHotMiddleware],
        index: ['./modules/products.js', webpackHotMiddleware],
        vendor: ['bootstrap', 'pubsub', webpackHotMiddleware]
    },
    output: {
        path: path.resolve('public/javascripts/build'),
        publicPath: 'javascripts/build/',
        filename: '[name].js',
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [
            // some loaders here
        ]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
}

app.js

// some code before
var app = express();
(function() {

  // Step 1: Create & configure a webpack compiler
  var webpack = require('webpack');
  var webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : './webpack.config');
  var compiler = webpack(webpackConfig);

  // Step 2: Attach the dev middleware to the compiler & the server
  app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: false,
    publicPath: webpackConfig.output.publicPath,
    stats: {
      colors: true
    }
  }));

  // Step 3: Attach the hot middleware to the compiler & the server
  app.use(require("webpack-hot-middleware")(compiler, {
    log: console.log,
    path: '/__webpack_hmr',
    heartbeat: 10 * 1000
  }));
})();
// some code after

<强>4。模板上的 JS 代码
然后在 Handlebars 页面上我需要捆绑的 javascript

<script src="javascripts/build/common.js"></script>
<script src="javascripts/build/vendor.js"></script>
<script src="javascripts/build/cart.js"></script>

<强>5。 NPM 启动
最后，如果我使用 标准 npm start 启动服务器，我会在 shell 中看到 webpack 捆绑所有内容，没有错误，但如果我转到 localhost:3000/ 它找不到 Webpack 创建的任何 Assets 。相反，如果我运行 webpack 来创建各种包，就像在生产中一样，那么一切都会正确创建并且按预期工作。

希望有人能找出我做错了什么。

谢谢

Answer 1

通过在这两行中添加斜杠，我设法找出导致问题的原因:

context: path.resolve('public/javascripts/'),
path: path.resolve('public/javascripts/build/'),