Question

我有一个捆绑了webpack的前端应用程序，它由Node后端服务器提供服务并与之通信。

Webpack热门开发服务器正在8080上运行。节点后端正在1985上运行。

我想从Node提供index.html，但希望在开发期间从热门开发服务器提供资源。要做到这一点，我有：

在webpack config中设置绝对 publicPath 值：

  output: {
    publicPath: 'http://localhost:8080/'
  },

并使用index.html中的绝对URL指向热门开发服务器：

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/js/vendors.js"></script>
<script src="http://localhost:8080/js/bundle.js"></script>

所以我可以运行热门开发服务器并运行我的节点服务器并浏览到http://localhost:1985。一切都很棒。

但是当我在生产中部署/运行时，这绝对不是我想要的。我想要vendors.js和bundle.js的相对网址，我绝对不想包含webpack-dev-server.js脚本。

我可以在服务器上使用 Handlebars 或其他一些模板来指定绝对/相对路径，但它不能提供一种删除热开发服务器脚本的简洁方法。我也可以为每个设置提供不同的索引文件，但这似乎很快就会导致错误。

如何最好地构建/部署这个以便在开发中使用热启动服务器，同时仍允许通过生产中的Node部署和提供整个服务？

Answer 1

我们目前正在使用您为路径建议的模板方法，并通过引入一个环境变量来指定我们是否正在构建'或'，从而减轻了webpack-dev-server.js脚本标记的丑陋感。显影”。

如果您使用gulp作为任务运行器（我们是），您可以使用process.env.NAME = VALUE设置它们。

如果您正在使用npm版本，则可以通过命令行使用--NAME VALUE添加它们。

我们后端服务器的最后一步是创建适合我们的index.html模板的变量：

    <%
    // connect the hot-reload dev server
    if (mode === 'dev') {
        print("<script type='text/javascript' src='" + webpackURL + "/webpack-dev-server.js'></script>");
    }
    %>
    <script type="text/javascript" src="<%= webpackURL %>/js/bundle.js"></script>

Answer 2

出于这个原因，我停止使用webpack-dev-server，而是使用webpack-dev-middleware / webpack-hot-middleware的组合，因为后者允许您将它们安装在现有的快速服务器中。

我的服务器基本上是这样做的：

const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const app = express();

if (process.env.WEBPACK_DEV_SERVER === 'true') {
    const config = webpack(config);
    app.use(webpackDevMiddleware(compiler));
    app.use(webpackHotMiddleware(compiler));
} else {
    app.use(express.static(path.join(__dirname, './dist'));
}

app.use((req, res) => {
    res.status(200).send(`
        <!doctype html>
        <html>
        <head>
            <title>App</title>
        </head>
        <body>
            <div id="root"></div>
            <script src="/bundle.js"></script>
        </body>
        </html>
    `);
});

您可以在60fram.es react boilerplate

中看到完整的示例

使用Node后端设置webpack hot dev-server进行生产

2 个答案: