webpack-dev-server 如何包含 bundle

Question

我正在尝试从在我的开发环境中使用 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']
                }
            }
        ]
    },
}

Answer 1

我找到了解决我的问题的方法，我想为其他从 webpack 切换到 webpack-dev-server 的人提供指导：

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

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

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

<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/，一切都会正常工作

webpack-dev-server 如何包含 bundle

Webpack-dev-server how to include bundle

frontend

webpack

webpack-dev-server