首页 文章

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

提问于
浏览 次
2

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

Webpack热启动服务器正在 8080 上运行 . 节点后端正在 1985 上运行 .

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

在webpack配置中设置绝对的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 的相对URL，我绝对不想包含 webpack-dev-server.js 脚本 .

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

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

javascript node.js deployment bundle webpack

2 回答

  • 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>
    回复于
  • 0

    出于这个原因，我停止使用 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中看到完整的示例

    回复于

相关问题