0

更新当前问题：

似乎 webpack 热加载器出错了，因为当我运行以下 cmd:webpack 时，它可以像往常一样构建。但是当我运行 ""dev": "webpack-dev-server --color --hot -- progress && node ./server.js"".webpack 无法为我生成构建文件。

我的 webpack.config 如下：

module.exports = {
    entry: getEntries(),

.....

function getEntries(){
var routeDir = path.join(SRC_DIR,"javascripts","routes");
var routeNames = routeDir?fs.readdirSync(routeDir):[];

var nameMaps = {};
routeNames.forEach(function(routeName){
    var filename = routeName.match(/(.+)\.js$/)[1];
    console.log("filename in entry ",filename);
    if(filename){
        var devEntryPath = [
            'webpack-dev-server/client?http://127.0.0.1:3001', // WebpackDevServer host and port
            'webpack/hot/only-dev-server',
            path.join(routeDir,filename)
        ];
        nameMaps[filename] = devEntryPath;

    }
});
return nameMaps;
}

服务器.js

  var server = new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3001,'localhost',function(err,result){
    if(err) console.log(err);
    console.log("webpack listening at port 3001");
});
var app = express();


app.get("/monitor/index",function(req,res){
    res.sendFile(__dirname+"/src/views/"+"page1.html");
});
app.get("/monitor/category/*",function(req,res){
    res.sendFile(__dirname+"/src/views/"+"page2.html");
});

app.use(express.static(__dirname))
        .listen(9090, 'localhost', function (err, result) {
              if (err) console.log(err);
              console.log('Listening at localhost:9090');
});
4

1 回答 1

0

最后，我找到了问题所在，并且知道了 webpack-dev-server 和我的 express 服务器之间的关系。

当使用带有 webpack-dev-server 的 hot-loader 时： step1：webpack 将输入文件构建到 publicPath（在 webpack.config.js 的“输出”中指定）。step2，节点服务器将html发送到前端，并搜索相关资产（如js，img等），但在哪里？我们可以将脚本（与html相关）路径更改为webpack-dev-server。（刚刚由step1生成），因此node-server会向webpack-dev-server寻求帮助。总结一下，我修改了3个地方：

  • webpackDevServer 的 publicPath
  • webpack 输出（publicPath），等于上面
  • html中的脚本路径。

就是这样。现在，我的项目可以按预期运行。

于 2016-05-09T05:38:32.677 回答