webpack-dev-server不起作用

Question

更新當前問題 ：

似乎webpack熱加載程序出錯，因為當我運行以下cmd：webpack時，它可以照常構建。但是當我運行“” dev“時：” webpack-dev-server --color --hot- progress &&節點./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;
}

server.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');
});

Answer 1

終於，我找到了問題所在，並且知道了webpack-dev-server和我的express服務器之間的關系。

將熱加載程序與webpack-dev-server一起使用時：步驟1：webpack將輸入文件構建到publicPath（在webpack.config.js的“輸出”中指定）。 步驟2，節點服務器將html發送到前端，並搜索相關資產（例如js，img等），但是在哪里？ 我們可以將腳本（與html相關）的路徑更改為webpack-dev-server。（僅由step1生成），因此節點服務器將向webpack-dev-server尋求幫助。 總結起來，我修改了3個地方：

• webpackDevServer的publicPath
• webpack輸出（publicPath），等於上面
• html中的腳本路徑。

僅此而已。現在，我的項目可以按預期運行。