將Webpack配置爲在Laravel應用程序中工作

我想爲我的基本Laravel應用程序使用webpack-dev-server。從official Webpack docs我瞭解到以下內容：將Webpack配置爲在Laravel應用程序中工作

您可能想要在開發中運行後端服務器或模擬它。您不應該使用webpack-dev-server作爲後端。其唯一的的目的是提供靜態（webpacked）資產。

您可以並排運行兩臺服務器：webpack-dev-server和您的後端服務器。

在頁面的底部，他們舉了一個關於如何實現這個功能的例子。我跟着一起，遇到了兩條錯誤消息。這是我將Webpack整合到Laravel應用程序中的嘗試。

webpack.config.js

var path = require("path"); 
 

 
module.exports = { 
 
    context: path.resolve('resources'), 
 
    entry: [ 
 
     './assets/js/app.js' 
 
    ], 
 
    output: { 
 
     path: path.resolve('public/assets/'), 
 
     publicPath: 'http://localhost:8080/assets/', 
 
     filename: "bundle.js" 
 
    }, 
 
    devServer: { 
 
     contentBase: 'public', 
 
     hot: true, 
 
     proxy: { 
 
      "*": "http://laravel.dev/" 
 
     } 
 
    } 
 
};

app.blade.php

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Learning Laravel</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     @yield('content') 
 
    </div> 
 

 
    @yield('footer') 
 
    <script src="http://localhost:8080/assets/bundle.js"/> 
 
</body> 
 

 
</html>

[email protected]:~/learning-laravel$ webpack-dev-server --inline

控制檯輸出：

http://localhost:8080/ 
webpack result is served from http://localhost:8080/assets/ 
content is served from public 
Hash: 3346964212f5b22513c6 
Version: webpack 1.12.2 
Time: 347ms 
    Asset Size Chunks    Chunk Names 
bundle.js 228 kB  0 [emitted] main 
chunk {0} bundle.js (main) 213 kB [rendered] 
    [0] multi main 52 bytes {0} [built] [1 error] 
    [1] /usr/lib/~/webpack-dev-server/client?http://localhost:8080 2.14 kB {0} [built] 
    [2] (webpack)/~/node-libs-browser/~/url/url.js 22.3 kB {0} [built] 
    [3] (webpack)/~/node-libs-browser/~/punycode/punycode.js 14.6 kB {0} [built] 
    [4] (webpack)/buildin/module.js 251 bytes {0} [built] 
    [5] (webpack)/~/node-libs-browser/~/url/~/querystring/index.js 127

...

[61] ./resources/assets/js/app.js 103 bytes {0} [built] 
    [62] ./resources/assets/js/login.js 28 bytes {0} [built] 

ERROR in multi main 
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in /home/vagrant/learning-laravel/resources 
@ multi main 
webpack: bundle is now VALID.

我使用宅基地。該申請送達http://laravel.dev/。所以我的問題是如何並排運行兩個服務器（webpack-dev-server和後端服務器）。我錯過了什麼？

來源

2015-09-19 soosap

如果您完全從'devServer'中刪除'proxy'會有幫助嗎？我有幾乎相同的設置，它的工作原理。當然，您仍然可以使用http://learning-laravel.dev:8888或類似訪問您的網站。 – bernhardw

你缺少的東西很簡單，你必須在Laravel後端服務器（例如路由/資產）下代理webpack-dev-server。

爲此，我讓你檢查http-proxy，Express中間件，甚至是socat/netcat CLI工具。

來源

2016-01-09 10:59:02 Raito

將Webpack配置爲在Laravel應用程序中工作

回答

相關問題