Webpack-dev-server 如何包含捆绑包答案

【问题标题】：Webpack-dev-server how to include bundleWebpack-dev-server 如何包含捆绑包
【发布时间】：2026-01-14 16:55:02
【问题描述】：

我正在尝试从在我的开发环境中使用 webpack 切换到使用 webpack-dev-server。

在正确创建捆绑包并位于内存http://localhost:8080/path/to/bundle 的意义上，一切正常。但我无法访问此路径，因为浏览器阻止了混合内容，并且无法通过 https 访问该文件。

所以这是我的第一个问题，但如果我可以解决这个问题，我不能只是通过说来包含文件

<script src='http://localhost:8080/path/to/bundle'> 因为当我将其推送到生产环境时这将不起作用。

我已经观看并阅读了许多不同的教程，但我似乎无法真正理解它是如何工作的。作为参考，这是我的配置文件：

module.exports = {
    entry: "./npm_views/entry.js",
    output: {
        filename: "npm_bundle.js",
        publicPath: '/build',
        path: path.resolve(__dirname, "build/"),
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: /npm_views/,
                loader: "babel-loader",
                query: {
                    presets: ['react' ,'env'],
                    plugins: ['transform-class-properties']
                }
            }
        ]
    },
}

【问题讨论】：

标签： webpack frontend webpack-dev-server

【解决方案1】：

我找到了解决问题的方法，我想为其他从 webpack 切换到 webpack-dev-server 的人留下一个指南：

首先，您需要向 webpack.config.js 文件添加公共路径：

module.exports = {
    ...
    output: {
        ...
        filename: "bundle.js",
        publicPath: '/build',
        ...
    },
    ...
}

webpack-dev-server 启动在端口 8080 上运行的服务器，该服务器已加载并可以从您指定的 publicPath + 文件名访问该文件。所以如果你想包含它你必须添加一个像这样的脚本标签：

<script src='http://localhost:8080/build/bundle.js'>

或更一般地

<script src='http://localhost:8080/publicPath/filename'>

现在第一个问题是在生产中你不会使用 webpack-dev-server。您将使用 webpack 在指定路径中创建构建文件。所以您必须在包含捆绑包的 html 中执行类似的操作：

<?php

$BundlePath = IsThisMyLocalMachine ? 'http://localhost:8080/publicPath/filename' : 'build\bundle.js'

?>

<html>
...
<script src='<?php echo $BundlePath ?>'>
..
</html>

现在最后一个问题是，如果您的网站使用 https 和 webpack-dev-server 提供基于 http 的构建，浏览器会将其作为混合内容阻止。

不过，解决这个问题非常简单。 您只需将以下内容添加到您的配置文件中，告诉webpack-dev-server 在https 上提供内容：

module.exports = {
    ...
    output: {
        ...
        filename: "bundle.js",
        publicPath: '/build',
        ...
    },
    devServer: {
        https: true,
    },
    ...
}

现在，如果您将所有这些 http://localhost:8080/ 更改为 https://localhost:8080/ 一切都应该正常

【讨论】：

对于其他来这里寻找这个和关于问题 1 的人，Webpack 现在有一个 devServer 选项：{writeToDisk: true} 这将允许您从 /publicPath/filename 导入