配置 Webpack 以在 Laravel 应用程序中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32670455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Configuring Webpack to work in a Laravel application
提问by soosap
I would like to use webpack-dev-serverfor my basic Laravel application. From the official Webpack docsI learned the following:
我想将webpack-dev-server用于我的基本 Laravel 应用程序。从官方 Webpack 文档中，我了解到以下内容：
You may want to run a backend server or a mock of it in development. You should not use the webpack-dev-server as a backend. Its only purpose is to serve static (webpacked) assets.
You can run two servers side-by-side: The webpack-dev-server and your backend server.
您可能希望在开发中运行后端服务器或模拟它。你不应该使用 webpack-dev-server 作为后端。它的唯一目的是为静态（webpacked）资产提供服务。
您可以并排运行两个服务器：webpack-dev-server 和您的后端服务器。
At the bottom of the page they give an example on how to accomplish that. I followed along and got stuck with two error messages. This is my attempt to integrate Webpack into a Laravel application.
在页面底部，他们给出了如何实现这一目标的示例。我跟着走，却被两条错误消息困住了。这是我将 Webpack 集成到 Laravel 应用程序中的尝试。
webpack.config.js
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
应用程序.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>vagrant@learning-laravel:~/learning-laravel$ webpack-dev-server --inline
Console output:
控制台输出：
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.
I am using Homestead. The application is served on http://laravel.dev/. So my question is how to run the two servers (the webpack-dev-server and the backend-server) side by side. What am I missing?
我正在使用 Homestead。该应用程序在http://laravel.dev/ 上提供服务。所以我的问题是如何并排运行两个服务器（webpack-dev-server 和 backend-server）。我错过了什么？
采纳答案by Raito
What you are missing is simple, you have to proxy webpack-dev-server under the Laravel backend server (route /assets for example).
您缺少的很简单，您必须在 Laravel 后端服务器下代理 webpack-dev-server（例如路由 /assets）。
To do it, I let you check http-proxy, Express middlewares, and even socat / netcat CLI tools.
为此，我让您检查 http-proxy、Express 中间件，甚至 socat / netcat CLI 工具。
